CSS Pattern Generator
Choose a pattern, set two colours and the size of each tile, and copy a few lines of CSS that need no image file.
About CSS Pattern Generator
A repeating pattern can give a page texture without adding an image to download. CSS gradients can draw stripes, dots, checks and grids, but the code for each is a little cryptic. This generator writes it for you from two colours and a few sizes, and shows the result as you adjust it.
Choose from stripes, dots, offset dots, checks, grid lines and a zigzag. Set the tile size, the width of the lines or dots and, for stripes, the angle. The output is a few lines of plain CSS that you can add to any element, and you can layer other backgrounds on top.
How to use CSS Pattern Generator
- Choose a pattern.
- Pick the pattern colour and the background colour.
- Set the tile size and the line or dot size, and the angle for stripes.
- Copy the CSS.
Common uses
- Adding texture to a hero or section background
- Making a transparent-style checkerboard
- Drawing a blueprint grid behind a diagram
- Creating diagonal warning stripes
Frequently asked questions
Why do patterns use gradients?
A gradient with hard colour stops is an image the browser draws itself. It is tiny, sharp at any zoom level and needs no download, which makes it a good fit for simple repeating designs.
What is the tile size?
It is the distance before the pattern repeats. For checks, the tile size is the size of one square. The code uses a tile twice that size to hold two squares across and two down.
Can I put text over a pattern?
Yes, but check the contrast. Strong stripes behind small text are hard to read, so use colours that are close in brightness or place the text on a plain panel.
How do I make the pattern fade out?
Add a second background layer, such as a gradient from transparent to your page colour, above the pattern. Layers are separated by commas in the background-image property.