Generated CSS
Pure CSS background patterns use repeating-linear-gradient() and repeating-radial-gradient() to create geometric patterns without any image files. This means zero network requests, instant loading, and patterns that scale perfectly at any resolution.
/* Diagonal stripes */
.pattern {
background-color: #0a0a0f;
background-image: repeating-linear-gradient(
45deg,
#7c6fff 0px,
#7c6fff 2px,
transparent 2px,
transparent 20px
);
}
/* Dots */
.pattern {
background-color: #0a0a0f;
background-image: radial-gradient(
circle,
#7c6fff 2px,
transparent 2px
);
background-size: 20px 20px;
}
| Pattern | CSS technique | Best use |
|---|---|---|
| Stripes | repeating-linear-gradient | Loading states, backgrounds |
| Dots | radial-gradient + background-size | Subtle page backgrounds |
| Checkerboard | Two linear gradients combined | Transparency indicators |
| Grid | Two perpendicular linear gradients | Graph paper, graph UIs |
| Diagonal | repeating-linear-gradient at angle | Accents, badges |
| Cross hatch | Two diagonal linear gradients | Technical drawings, maps |
Yes — repeating-linear-gradient and repeating-radial-gradient are supported in all modern browsers including Chrome, Firefox, Safari and Edge. No vendor prefixes needed.
Yes — CSS allows multiple backgrounds. Layer a pattern over a solid color or image: background: url(image.jpg), repeating-linear-gradient(...);. The first value is on top.
For simple geometric patterns, CSS is simpler and has no network cost. For complex patterns with paths and curves, SVG gives more control. For texture-like patterns that need to tile seamlessly with complex shapes, a small SVG or PNG is still the best choice.
Related tools: CSS Gradient Generator · CSS Filter Generator