About this tool
Build a repeating background pattern — stripes, checkerboard, dots or grid — from two colours and a size, using gradients only, then copy the CSS. The preview updates live in your browser.
Frequently asked questions
How are these patterns made without images?
They use CSS linear and radial gradients with background-size, which the browser tiles to draw the repeating pattern.
Will the pattern scale on high-density screens?
Yes — gradients are vector based, so the pattern stays crisp at any resolution or zoom level.