CSS Pattern Generator
Generate pure CSS background patterns instantly. Choose dots, lines, grid, checkers or diagonal — copy the CSS and use it anywhere.
① Choose a pattern type ② Adjust size and colors ③ Copy the CSS output
Pattern color
#C9B89A
Background color
#0E0E0E
How it works
Each pattern is built with pure CSS gradients — no images, no SVG. Dots use radial-gradient, lines and diagonal use repeating-linear-gradient, grid uses two crossed linear-gradients, and checkers use conic-gradient.
Size control
The Size slider sets the background-size tile. Larger tiles create a more sparse pattern; smaller tiles create a denser texture.
CSS only
The generated CSS uses only background-image and background-size, making it compatible with any HTML element and all modern browsers.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
What is a CSS background pattern?
CSS background patterns are repeating visual textures created entirely with CSS gradients — no images required. Using radial-gradient, linear-gradient, and conic-gradient, you can produce dots, lines, grids, checkers, and diagonal stripes that tile seamlessly. This technique is supported in all modern browsers and produces zero HTTP requests, making it ideal for performance-sensitive UI backgrounds, hero sections, cards, and full-page textures. The background-size property controls the tile repeat interval.
Frequently asked questions
A CSS background pattern is a repeating visual texture generated entirely with CSS gradient functions — no images or SVG required. By combining radial-gradient, linear-gradient, repeating-linear-gradient, and conic-gradient with background-size, you can create seamless dots, lines, grids, checkerboards, and diagonal stripes.
The dot pattern uses radial-gradient to draw a small filled circle at the center of each tile, then transparent fill for the rest. By setting background-size to the tile dimensions, the dots repeat in a regular grid.
The lines pattern uses a single repeating-linear-gradient in one direction, creating parallel horizontal lines. The grid pattern uses two perpendicular linear-gradients layered together, creating a crosshatch grid with lines in both horizontal and vertical directions.
The conic-gradient function creates a four-quarter rotation where alternating quarters are filled with the pattern color or background color. By setting background-size to twice the tile size, the four quarters tile into a perfect checkerboard.
All five patterns use gradient functions supported in all modern browsers (Chrome, Firefox, Safari, Edge). The conic-gradient used for checkers requires Chrome 69+, Firefox 83+, and Safari 12.1+. All other patterns work in browsers from 2015 onwards.
Copy the generated CSS and apply it to any HTML element. You can add it inline via the style attribute or in a CSS class. For a full-page background, apply it to body or a fixed div. Combine with background-attachment: fixed for a parallax effect.
The tool supports 5 pattern types: dots, lines, grid, checkers, and diagonal. Each is configurable with an arbitrary tile size (4–40px) and fully custom pattern and background colors, producing thousands of visual combinations.