Make a page or section background out of CSS alone: a linear, radial or conic gradient, or a repeating pattern of stripes, dots, a grid or a checkerboard. Pick two colours and a size and copy the code. Nothing is downloaded by the visitor, so the background loads instantly and stays sharp on any screen. There is no live preview here, so the notes below describe how each pattern is built.
A gradient blends colours smoothly across the whole box, so it is good for large soft backgrounds behind a hero or a footer. A pattern repeats a small tile, so it adds texture without drawing attention to a particular spot. Both are generated by the browser from a few numbers, which is why the file size is a few hundred bytes and not a few hundred kilobytes.
With evenly spaced stops, the colours of a gradient are placed at equal distances along the line, so two colours meet in the middle and three colours meet at the middle and each end. The Gradient Generator on this site gives you control over the exact position of each stop if you need it.
The danger with a pattern is that it clashes with the text on top of it. A pattern with a contrast ratio of 1.1 to 1.3 between its two colours reads as texture, while above about 2 to 1 it starts to compete with letters, especially small ones. If you want a bolder pattern, put the text on a solid panel with some padding.
Scale matters as much as colour. A grid with 8 pixel spacing looks like fine fabric, and a 64 pixel grid looks like a blueprint. Because the size is in pixels, a pattern keeps its size while the section around it grows and shrinks, so check it on both a phone and a wide desktop screen.
Each pattern is a gradient with hard colour stops. A stripe is a repeating linear gradient with colour 1 up to the stripe width and colour 2 for the next stripe width. A dot is a radial gradient that is colour 2 up to the dot radius and then transparent, repeated every tile. Grid lines are two linear gradients, one horizontal and one vertical, each a thin line followed by transparency.
Four overlapping triangular gradients are placed at offset positions inside a tile that is twice the square size. Each triangle fills one quarter of the tile with colour 2, and together they leave a checker pattern where the squares alternate between the two colours.
For stripes it is the width of one stripe. For dots it is the spacing between dot centres, and for the grid it is the spacing between lines. For the checkerboard it is the side of one square, so the repeating tile is twice that.
Yes. The background property accepts several layers separated by commas, with the first layer on top. Paste both pieces of generated code into one rule using that format, or put the pattern on a pseudo-element with partial opacity.
Hard stop gradients are drawn at the screen's pixel grid. If the tile size is a fraction of a pixel on a scaled display, the edge falls between pixels and looks soft. Whole-number sizes in pixels give the sharpest result.
Related: CSS gradient generator, CSS shadow generator, Colour contrast checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.