How to use the css pattern background generator
- Choose a pattern: stripes, diagonal stripes, dots, grid lines or a checker pattern. The preview updates as you type.
- Set the size in pixels. It is the width of one stripe band, the spacing between dots, the size of a grid cell or the size of one checker square. For dots and grid lines, also set the dot size or line thickness.
- Choose the background color and the pattern color with the color boxes or by typing hex codes. The colors at first are examples.
- Press Copy CSS and paste the lines into a rule for any element, such as a panel or a page section.
A 10px stripe pattern
With stripes, a size of 10, a white background and a green pattern color, the tool outputs two lines: a background-color and a background-image made with repeating-linear-gradient. The gradient lists the background color from 0 to 10px and the pattern color from 10px to 20px, then repeats, so each band is 10 pixels wide and one repeat is 20 pixels.
A dots pattern with a spacing of 20 and a dot size of 6 sets the background-size to 20px 20px and draws a 3px radius circle in the middle of each cell. A grid with a cell of 24 and a line of 1 draws one pixel lines on the top and left edge of every cell, which looks like graph paper. A checker pattern with a size of 8 uses a 16px by 16px tile built from two gradients.
Why use CSS instead of an image
A pattern made of gradients is a few lines of text. It loads instantly, has no file to host, stays sharp at any zoom or screen density, and its colors can be changed in the stylesheet. That makes it a good fit for backgrounds on cards, banners and sections where a small repeating texture is enough.
Gradients have limits. Very fine patterns can show uneven edges on some screens because gradients are drawn at the pixel grid, and complex artwork is better as an image. If you want smooth color blends rather than repeating shapes, use the CSS gradient generator, and for depth try the box shadow generator.
Using the code
The output has no selector, so you can put it in any rule: for example, .panel { ... } with the lines inside the braces. The background-color line acts as a fallback and fills the area behind the pattern.
Keep text readable on top of a pattern. Strong stripes or high contrast patterns can make text hard to read, so choose colors that are close to each other, or put text on a plain panel. The color contrast checker tests text and background colors, and the color palette generator suggests colors that work together. Only hex colors are accepted, which keeps the output safe to paste into a stylesheet.
Assumptions and limits
- The pattern is drawn with standard CSS gradients, which current browsers support. Very old browsers may show only the background color.
- Sizes are whole pixels from 2 to 200. Dot size and line thickness cannot be larger than the size.
- Colors must be hex codes of three or six digits. Names and other color formats are not accepted.
- The preview uses your browser's own drawing, so it may differ slightly from other browsers at fine sizes.
Frequently asked questions
How do I make a striped background with CSS?
Use repeating-linear-gradient with two color stops per band. Choose stripes here, set the width and colors, and copy the lines.
What do the two lines of code do?
The first sets a plain background color and the second draws the pattern over it with a gradient.
Can I change the angle of the stripes?
Use the direction menu to turn standard stripes to horizontal, or lean diagonal stripes either way. For any other angle, edit the first number in the gradient.
Does this send my colors anywhere?
No. The CSS is built in your browser and nothing is uploaded.