Presets
Pattern Type
Colors
Foreground
Background
Size / Scale 20px
Opacity 100%
Rotation 0°
CSS Pattern Tips & Guide
CSS background patterns are a performant, lightweight way to add visual texture to web pages — no images, no external requests, fully scalable.
Use Subtle Patterns
For most backgrounds, keep the foreground color close to the background and reduce opacity to 10–30%. Subtle texture adds depth without competing with your content.
Low Opacity for Texture
A pattern at 8–15% opacity reads as texture rather than decoration. Combine it with a solid background color for a polished, professional feel that adds depth without distraction.
Combine with Gradients
Layer a CSS background pattern under a semi-transparent gradient (e.g. background-image: linear-gradient(...), your-pattern). The gradient softens and enriches the pattern for more visual depth.
Use the
background-image property with gradient functions. For example: background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px; creates a polka dot pattern. All patterns from this generator are pure CSS — no images required.A polka dot (or dots) pattern is created with a
radial-gradient that draws a small circle and then fades to transparent: radial-gradient(circle, #color DOT_RADIUS, transparent DOT_RADIUS). The background-size controls the spacing between dots.A CSS grid background uses two overlapping linear gradients — one horizontal and one vertical — each drawing a 1px line:
linear-gradient(#color 1px, transparent 1px), linear-gradient(90deg, #color 1px, transparent 1px). Setting the same background-size for both creates evenly spaced grid squares.A checkerboard uses four 45-degree linear gradients at offset positions:
linear-gradient(45deg, #b 25%, transparent 25%), linear-gradient(-45deg, #b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b 75%), linear-gradient(-45deg, transparent 75%, #b 75%). Adjust background-size and background-position to control the square size.