EspañolCSS background patterns
Choose the pattern and adjust the two colors, the size and the thickness. The background is made with CSS gradients: it weighs nothing and stays sharp on any screen.
How to usePatterned backgrounds, CSS only
Available in: 
CSS background patterns: what it is for
Choose from eight patterns made only with CSS gradients (polka dots, dot grid, grid, lines, stripes, diagonals, checkerboard and zigzag) and adjust the two colors, size and thickness. Each pattern's thumbnail already shows your colors.
The code uses no images at all: it's lightweight and stays sharp at any resolution.
How to use
- Choose the pattern.
- Adjust the colors, size and thickness.
- Copy the CSS and apply the pattern class.
When to use it
- Subtle backgrounds for website sections.
- Headers and banners with texture.
- Backgrounds for presentations and mockups.
Frequently asked questions
Why make the pattern in CSS?
Because there's no image to download: the browser draws the pattern with gradients. The code is just a few lines, doesn't lose quality on high-resolution screens and changes color by editing the values.
How do I keep the pattern subtle?
Use two very similar colors (for example, background #ffffff and pattern #eef2f7) or give the pattern color some transparency. Strong patterns behind text hurt readability.
Does it work in all browsers?
Yes. The patterns use linear-gradient, radial-gradient, repeating-linear-gradient and conic-gradient, which all current browsers support.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.