HomeToolsPatterns

CSS WORKSPACE

Patterns

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Patterns

Pattern Type
Colors
100%
Dimensions
20px
20px
45deg
Presets
PREVIEW
css
background-color: #ffffff;
background-image: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 20px,
  #cbd5e1 20px,
  #cbd5e1 40px
);
A PRACTICAL GUIDE

Build a subtle, repeatable background

Repeating gradients can create grids, stripes, and dots without a downloaded image. Patterns are most useful behind a quiet section or an illustration. The spacing and contrast matter more than complexity: a dense pattern behind text can reduce legibility.

How to use this tool

  1. Choose a pattern and set the base surface color. Use a low-contrast line or dot color to start.
  2. Adjust the tile size and spacing while looking at a section-sized preview. A tiny tile may feel noisy on a large page.
  3. Copy all background declarations together. The image, size, and position properties work as a set.

Two transparent gradient images draw horizontal and vertical lines. The background-size makes each image repeat every 24 pixels. Increase that size for a more open pattern while leaving the line thickness unchanged.

Read the reference documentation ↗
Example to try in your project
.grid-surface {
  background-color: #f8fafc;
  background-image: linear-gradient(#e2e8f0 1px, transparent 1px),
                    linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
}

Before you ship

Patterns can create distracting interference at some zoom levels. Test text, mobile screens, and dark mode, and keep a solid background available where content needs maximum clarity.

Explore a related tool