CSS Pattern Generator

Q: Can I use a transparent background?

Yes, enter `transparent` or an rgba()/oklch() colour with alpha as the Background color.

Create pure CSS background patterns – dots, polka dots, stripes, checkerboard, grid, zigzag and crosshatch – with colors, tile size and thickness. No images.

Pattern settings

Pattern

Pattern color

Background color

Tile sizepx

Dot radiuspx

Preview

CSS code

background-color: #ffffff;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;

Related Tools

View All

CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator

What is CSS Pattern Generator?

Generates repeating background patterns using only CSS gradients, so no image files are needed. Choose a pattern, two colours, the tile size and line or dot thickness, and copy the resulting background declarations.

How to use CSS Pattern Generator

Choose a Pattern: Dots, Polka dots, Stripes, Checkerboard, Grid, Zigzag or Crosshatch grid.
Set the Pattern color and Background color.
Adjust Tile size and the thickness (dot radius, stripe width or line width) and, for stripes, the Angle.
Check the preview.
Copy the CSS code.

Example

Input

Checkerboard, tile 40px, pattern #000000 on #ffffff

Output

background-color: #ffffff;
background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
background-size: 40px 40px;

When to use CSS Pattern Generator

Use CSS patterns for subtle page backgrounds, placeholders, graph-paper effects and decorative sections; they scale perfectly and cost no HTTP request. For complex or illustrative repeating artwork, an SVG tile is more flexible.

How CSS Pattern Generator works

Every pattern is a background-color plus one or more gradients repeated by background-size. Dots use radial-gradient(color r, transparent r); polka dots add a second offset layer via background-position. Stripes use repeating-linear-gradient with hard colour stops; the checkerboard uses repeating-conic-gradient(color 0% 25%, transparent 0% 50%); grids combine a horizontal and a vertical linear gradient; zigzag is built from four 45° triangles. Thickness is limited to the tile size.