CSS background pattern generator
Choose a pattern, two colours and a size and copy a background made only of CSS gradients. No image files, so the pattern loads instantly, stays sharp at any zoom, and is easy to change later.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose a pattern.
- Set the pattern and background colours, the size and, for stripes, the angle.
- Copy the CSS and add it to any element, for example a section or the body.
How it works
- Stripes:
repeating-linear-gradient with the colour from 0 to the stripe width and transparent from there to the period.
- Checkerboard: one
conic-gradient colouring two opposite quarters of a tile twice the square size.
- Polka dots: a small
radial-gradient circle repeated by background-size.
- Grid and diagonal grid: two thin line gradients crossing at right angles.
- Zigzag: four triangles from linear gradients at 45° steps, two of them shifted by half a tile.
Example
The default diagonal stripes with size 24 px and weight 50 % give:
background-color: #eff6ff;
background-image: repeating-linear-gradient(45deg, #3b82f6 0 12px, transparent 12px 24px);
Tips
- Use Swap colours to try the inverse quickly.
- For subtle textures, pick a pattern colour only slightly darker than the background.
- Stripes at angles other than 0° and 90° can show jagged edges at small sizes; larger sizes look smoother.
Frequently asked questions
How can CSS draw a pattern without images?
Gradients can switch colour abruptly - two colour stops at the same position give a hard edge - and background-size repeats a small tile across the element. Stripes, dots, checks and lines are all built that way.
What does the size slider mean for each pattern?
It is the repeat distance - the stripe period, the side of one square of the checkerboard, the spacing of dots, the grid cell and the zigzag width. The weight slider sets the stripe width or dot diameter as a share of that size, and grid lines get a fifth of it.
Do these patterns work in all browsers?
They use linear, repeating-linear, radial and conic gradients. All current browsers support them; conic gradients, used for the checkerboard, need a browser from 2020 or later.
Can I put the pattern behind text?
Yes, but busy patterns make text hard to read. Use colours close to each other, a large size, or a solid panel behind the text.