Introduction to generative patterns
Generative patterns transform your interfaces into memorable visual experiences. Unlike static images, these patterns are created algorithmically with CSS, making them lightweight, scalable, and infinitely customizable.
In this in-depth guide, we'll explore 6 essential techniques for creating generative backgrounds: from complex gradients to mesh gradients, grain effects, and flow fields. Each technique comes with interactive demos and ready-to-use code.
CSS patterns are vector-based (perfect for Retina), natively animatable, and weigh just a few bytes versus several KB for an image. They also adapt automatically to all screen sizes.
Complex CSS gradients
CSS offers three types of gradients that can be combined and repeated to create sophisticated patterns: linear-gradient, radial-gradient and conic-gradient. The key is to use the repeating-* versions and layer multiple layers on top of each other.
Animated conic gradient
The conic-gradient creates circular gradients radiating from a central point. Combined with filter: hue-rotate(), you get a mesmerizing kaleidoscopic effect.
.pattern-conic {
background: conic-gradient(
from 0deg at 50% 50%,
#6366f1 0deg,
transparent 60deg,
#8b5cf6 120deg,
transparent 180deg,
#6366f1 240deg,
transparent 300deg,
#8b5cf6 360deg
);
background-size: 80px 80px;
animation: rotateConic 20s linear infinite;
}
@keyframes rotateConic {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}Repeated radial gradient
repeating-radial-gradient allows you to create perfect concentric circles. By layering several with different origins, you get interesting interference patterns.
.pattern-radial {
background:
/* Circles from center */
repeating-radial-gradient(
circle at 50% 50%,
transparent 0px,
transparent 10px,
rgba(99, 102, 241, 0.1) 10px,
rgba(99, 102, 241, 0.1) 20px
),
/* Circles from corner */
repeating-radial-gradient(
circle at 0% 0%,
transparent 0px,
transparent 15px,
rgba(139, 92, 246, 0.08) 15px,
rgba(139, 92, 246, 0.08) 30px
);
animation: pulseRadial 4s ease-in-out infinite;
}Geometric patterns with CSS
By combining multiple linear-gradient with precise angles, you can recreate complex geometric patterns like triangles, diamonds, or chevrons. The technique relies on overlapping transparent shapes.
.pattern-geometric {
background-color: #12121a;
background-image:
/* Triangles - first layer */
linear-gradient(30deg,
#6366f1 12%,
transparent 12.5%,
transparent 87%,
#6366f1 87.5%
),
/* Triangles - second layer */
linear-gradient(150deg,
#6366f1 12%,
transparent 12.5%,
transparent 87%,
#6366f1 87.5%
),
/* Losanges */
linear-gradient(60deg,
rgba(139, 92, 246, 0.3) 25%,
transparent 25.5%,
transparent 75%,
rgba(139, 92, 246, 0.3) 75%
);
background-size: 80px 140px;
background-position:
0 0,
0 0,
40px 70px;
}Angles of 30, 60, 120, and 150 degrees create equilateral triangles. For hexagons, use multiples of 60 degrees. For squares, stick to 45 and 135 degrees.
Grid with glow effect
A simple grid can become spectacular with an animated glow effect at the center. This technique uses a pseudo-element for the glow effect.
.pattern-grid {
background-image:
linear-gradient(
rgba(99, 102, 241, 0.1) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(99, 102, 241, 0.1) 1px,
transparent 1px
);
background-size: 50px 50px;
position: relative;
}
.pattern-grid::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at 50% 50%,
#6366f1 0%,
transparent 70%
);
opacity: 0.2;
animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse {
0%, 100% {
transform: scale(1);
opacity: 0.2;
}
50% {
transform: scale(1.3);
opacity: 0.4;
}
}Noise and grain with SVG filters
The grain (noise) effect adds an organic texture to your designs. In pure CSS, we use an inline SVG filter encoded as a data URI with feTurbulence. This technique is very lightweight and compatible with all modern browsers.
.pattern-noise {
background-color: #12121a;
position: relative;
}
.pattern-noise::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg
viewBox='0 0 400 400'
xmlns='http://www.w3.org/2000/svg'%3E
%3Cfilter id='noise'%3E
%3CfeTurbulence
type='fractalNoise'
baseFrequency='0.9'
numOctaves='4'
stitchTiles='stitch'/%3E
%3C/filter%3E
%3Crect width='100%25' height='100%25'
filter='url(%23noise)'/%3E
%3C/svg%3E");
opacity: 0.15;
mix-blend-mode: overlay;
}
/* Optional colored halo */
.pattern-noise::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
#6366f1 0%,
transparent 70%
);
opacity: 0.3;
}The feTurbulence filter can be costly on large surfaces. Limit the size or use a pre-generated PNG image for fullscreen backgrounds on mobile.
Mesh gradients
Mesh gradients create organic and fluid color transitions, very popular in modern design (Apple, Stripe). In CSS, we simulate this effect by layering multiple radial-gradient with different positions.
.pattern-mesh {
background:
/* Point 1 - top left */
radial-gradient(
at 40% 20%,
rgba(99, 102, 241, 0.8) 0px,
transparent 50%
),
/* Point 2 - top right */
radial-gradient(
at 80% 0%,
rgba(139, 92, 246, 0.6) 0px,
transparent 50%
),
/* Point 3 - middle left */
radial-gradient(
at 0% 50%,
rgba(6, 182, 212, 0.5) 0px,
transparent 50%
),
/* Point 4 - middle right */
radial-gradient(
at 80% 50%,
rgba(217, 70, 239, 0.5) 0px,
transparent 50%
),
/* Bottom points */
radial-gradient(
at 0% 100%,
rgba(99, 102, 241, 0.6) 0px,
transparent 50%
),
radial-gradient(
at 80% 100%,
rgba(16, 185, 129, 0.4) 0px,
transparent 50%
);
background-color: #0a0a0f;
animation: meshMove 10s ease-in-out infinite;
}
@keyframes meshMove {
0%, 100% {
background-position:
0% 0%, 100% 0%,
0% 50%, 100% 50%,
0% 100%, 100% 100%;
}
50% {
background-position:
20% 20%, 80% 20%,
20% 60%, 80% 40%,
20% 80%, 80% 80%;
}
}Simplified flow fields in CSS
Flow fields are normally created in Canvas using noise algorithms (Perlin, Simplex). In CSS, a similar effect can be simulated with animated diagonal lines and floating halos.
.pattern-flow {
background: #12121a;
position: relative;
overflow: hidden;
}
/* Flow lines */
.pattern-flow::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 2px,
rgba(99, 102, 241, 0.03) 2px,
rgba(99, 102, 241, 0.03) 4px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 2px,
rgba(139, 92, 246, 0.03) 2px,
rgba(139, 92, 246, 0.03) 4px
);
animation: flowMove 30s linear infinite;
}
/* Halos flottants */
.pattern-flow::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse at 30% 30%,
rgba(99, 102, 241, 0.4) 0%,
transparent 50%
),
radial-gradient(
ellipse at 70% 70%,
rgba(139, 92, 246, 0.3) 0%,
transparent 50%
);
animation: flowPulse 5s ease-in-out infinite;
}
@keyframes flowMove {
from {
transform: translate(0, 0) rotate(0deg);
}
to {
transform: translate(50px, 50px) rotate(10deg);
}
}Creative combinations
The real magic happens when you combine multiple techniques. Here is an example that mixes repeating-conic-gradient, repeating-radial-gradient and a central halo for a complex and unique effect.
.pattern-combined {
background:
/* Rayons conic subtils */
repeating-conic-gradient(
from 0deg at 50% 50%,
transparent 0deg 10deg,
rgba(99, 102, 241, 0.05) 10deg 20deg
),
/* Cercles concentriques */
repeating-radial-gradient(
circle at 50% 50%,
transparent 0px,
transparent 40px,
rgba(139, 92, 246, 0.08) 40px,
rgba(139, 92, 246, 0.08) 41px
),
/* Halo central */
radial-gradient(
ellipse at center,
rgba(99, 102, 241, 0.2) 0%,
transparent 60%
);
background-color: #12121a;
animation: combinedRotate 60s linear infinite;
}
@keyframes combinedRotate {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}Classic dot pattern
A simple but effective dot pattern, ideal for hero section or card backgrounds.
.pattern-dots {
background-image: radial-gradient(
circle,
#6366f1 1.5px,
transparent 1.5px
);
background-size: 24px 24px;
background-color: #12121a;
animation: dotsMove 20s linear infinite;
}
@keyframes dotsMove {
from { background-position: 0 0; }
to { background-position: 120px 120px; }
}Best practices
To get the most out of generative CSS patterns, follow these recommendations:
Performance
- Limit gradient layers: beyond 5-6 layers, performance can degrade on mobile
- Prefer
transformandopacityfor animations - these properties are GPU-accelerated - Use
will-changesparingly for permanently animated elements - Test on mobile: some complex effects can drain the battery
Accessibility
/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
.pattern-conic,
.pattern-radial,
.pattern-mesh,
.pattern-flow,
.pattern-combined {
animation: none;
}
}
/* Mode contraste eleve */
@media (prefers-contrast: more) {
[class*="pattern-"] {
background: #000;
}
}Generative patterns are most effective as backgrounds with low opacity. Always maintain sufficient contrast with foreground text. Use colors from your palette to maintain consistency.
Conclusion
CSS generative patterns offer an elegant way to add texture and movement to your interfaces. From conic gradients to mesh gradients and grain effects, these techniques are lightweight, performant, and infinitely customizable.
By combining multiple gradient layers and using pseudo-elements for additional effects, you can create unique backgrounds that will set your projects apart. Don't hesitate to experiment with values, colors, and animations!
Find over 50 patterns and backgrounds ready to use in our CSS effects collection. Each effect is copyable in one click and fully customizable.