Backgrounds & Color · Free generator

CSS Pattern Generator

Free · no sign-up Live preview · copy or download the CSS

Stripes, dots, checkerboards and grid paper — all drawn from pure CSS gradients, no images. Pick a pattern, tune colors and scale, and copy a declaration that tiles forever.

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS GradientsHard color stops — the whole trick behind CSS patterns.STEP 2 · 20 minCSS Backgroundsbackground-size and layering control the tiling.STEP 3 · 20 minCSS Custom PropertiesRecolor whole patterns with one custom property.


  1. CSS Gradient GeneratorBackgrounds & Color
  2. CSS Noise Texture GeneratorBackgrounds & Color
  3. CSS Glassmorphism GeneratorBackgrounds & Color
  4. Base64 Image Encoder for CSSDeveloper Tools
  5. CSS Border Radius GeneratorShape & Layout
  6. CSS Layer Styles GeneratorShadows & Effects


How it works


Every pattern here is a gradient with hard stops — two colors placed at the same position blend across zero distance, producing a crisp edge instead of a fade. repeating-linear-gradient tiles stripes along its axis; dots are a tiled radial gradient; the checkerboard is one conic gradient tiled by background-size; grid lines are two 1px linear gradients crossed.


Because they're generated, patterns cost no downloads, scale to any resolution, and recolor with a single value change — try theming them with custom properties.


Run the code — try it yourself
Give the page section striped "caution tape" — apply a 45° repeating gradient with #E0982D and #20242A bands, 14px each.


exercise.html — editable


Frequently asked questions
Why gradients instead of a tiny image tile?
No request, no blur on retina screens, instant recoloring, and the pattern lives in your stylesheet under version control.
Can I layer a pattern over a color or gradient?
Yes — backgrounds stack with commas. Put the pattern image layer above a background-color or below a translucent gradient wash.
The dots look clipped at the edges.
Tile size and dot radius interact; keep the dot diameter under half the tile, or add background-position to offset the first tile.
How do I make the stripes vertical or horizontal?
Set the angle: 0deg gives horizontal bands, 90deg vertical. Diagonals read best between 30–60deg.


Keep going
Once hard stops click, gradients stop being decoration and become a drawing API — stripes today, full flags and pixel art tomorrow. The theory lives in the Gradients lesson; add texture on top with the Noise generator.
CSSmatic is a non-profit project, made by developers for developers.