CSS Background Pattern Generator
Build geometric CSS background patterns from gradients and copy the ready-to-use CSS.
Angle only affects stripes and diagonal; thickness has no effect on checks and carbon. Sliders that do nothing are disabled automatically.
How it works
The pattern is built from CSS gradients only; no image is ever loaded.
Adjust the two colours, size and angle and the live preview updates instantly.
Drop the ready CSS into the background of any element.
Tip
Being image-free, it adds no network request and never softens when scaled up.
For a subtle background pick two close colours so the pattern does not distract.
The pattern repeats as a seamless tile, so it fits any size.
About CSS Background Pattern Generator
Every pattern here is built from gradients alone: no image file and no SVG, so it costs zero HTTP requests and stays sharp at any zoom level. One detail catches people out — repeating-linear-gradient repeats along its own gradient axis, not along the element box, so a 0deg pattern starts at the bottom edge and slides as the element gets taller. That is why the grid pattern here is locked to 90deg and 180deg, which anchor the lines to the top and inline-start edges instead.
How to use CSS Background Pattern Generator
- 1
Pick one of seven patterns from the row at the top: stripes, checks, dots, zigzag, diagonal crosshatch, grid or carbon.
- 2
Set the background colour and the pattern colour; the swap button exchanges the two.
- 3
Adjust tile size, thickness and angle with the sliders — sliders that do nothing for the selected pattern are disabled automatically.
- 4
Tick "wrap in a CSS class" if you want the output inside a .pattern selector.
- 5
Copy the generated CSS and paste it straight onto your element.
Frequently asked questions
Why is the angle slider disabled for checks, dots, zigzag, grid and carbon?
Those five are built from conic-gradient, radial-gradient or fixed-position stacked linear layers, and none of them can be rotated using background properties alone. Real rotation needs transform: rotate on the element, which rotates the box as well. If you want an angled pattern, stripes and diagonal crosshatch support the full 0-360 degree range.
Is a CSS pattern really lighter than a background image?
On the network, yes: zero bytes downloaded, zero requests, and resolution independent. It is not free though. Every gradient layer is recomputed on each paint, and the carbon pattern uses six layers — put that on a full-screen animated element and you will see frame drops. For a static background it costs nothing you will notice.
Why are the checkerboard squares half the size I set?
The value you set is the size of the repeating tile, and each tile holds exactly four squares. So a 40px tile gives 20x20px squares. The corner square always takes the background colour, not the pattern colour.
What happens in older browsers?
Six of the seven patterns use only linear-gradient and radial-gradient, which have worked everywhere for years. Only checks needs conic-gradient, supported in Chrome, Firefox and Safari since 2020. In anything older the checkerboard degrades to the flat background colour.