CSS Pattern Background Generator
Create repeating backgrounds such as stripes, polka dots, and checks without any image file. Output either pure CSS built from gradients like repeating-linear-gradient, or an SVG you can paste in as a data URI. For smooth color blends, try the CSS Gradient Generator; for wavy section dividers, see the SVG Wave Generator.
🔒 Runs in your browser · Your data is never sent to a server
Preview
How to use
- Pick stripes, dots, or checks under "Pattern type" (or start from a preset).
- Adjust "Background color", "Pattern color", "Size", "Angle", and "Thickness / diameter", and check the preview.
- Choose CSS or SVG under "Output format".
- Use the "Copy" button to paste the code into your stylesheet.
Notes
- For checks, "Size" is the width of one square. The CSS repeats at twice that size.
- "Angle" follows the CSS linear-gradient convention (0 degrees points up, clockwise). It only affects stripes.
- The SVG is set to 100% width and height, so as a background it fills the whole area. The pattern itself has a fixed pixel size.
- Checks use `conic-gradient`, which very old browsers do not render. Use the SVG output there.
- Only #RRGGBB colors (and #RGB) are accepted; anything else is replaced with the default.
Glossary
repeating-linear-gradient
A linear gradient that repeats its color stops at a fixed length. Putting two stops at the same position gives a hard edge, which makes crisp stripes.
conic-gradient
A gradient that changes color by angle around a center point. Alternating colors across four quadrants draws a checkerboard in one layer.
data URI
A way to write data such as an image directly into a URL. SVG can be embedded as plain text, so no separate file needs to be loaded.
FAQ
Can I make stripes or polka dots without an image file?
Yes. Stripes use `repeating-linear-gradient`, dots use `radial-gradient` with a background-size, and checks use `conic-gradient`. It is all CSS, so no image has to be loaded or requested.
When should I use the CSS output versus the SVG output?
The CSS output is compact and easy to tweak later, for example with CSS variables. The SVG output is set as `url("data:image/svg+xml,...")`, and works in older browsers that lack `conic-gradient`, but the code is longer.
How is the stripe angle measured?
It follows CSS `linear-gradient`: 0 degrees points up and the value increases clockwise. So 0 gives horizontal stripes, 90 gives vertical stripes, and 45 gives diagonal stripes rising to the right. Dots and checks ignore the angle.
What does "Size" mean for the checkerboard?
It is the side length of one square. The CSS repeats a 2 x 2 block of squares as a single tile, so the output background-size is twice the value you set.
Why do the pattern edges look jagged?
When two gradient stops sit at the same position, the edge is not anti-aliased on some screens and can look stepped. Dots blend over 1px to soften this, but if it bothers you, try the SVG output.
Share this page