CSS Background Pattern Generator
Pick a pattern style, customize it, and copy the CSS background code.
About This Tool
Every pattern here, dots, stripes, grid, or checkerboard, comes from layered CSS gradients like radial-gradient and repeating-linear-gradient rather than a background image. That means the tile stays sharp at any resolution and resizes without ever pixelating.
How each pattern is actually built
The dots pattern uses a single radial-gradient(fg 1.5px, transparent 1.5px) repeated on a background-size tile equal to your chosen size. Notice that the dot radius is hard-coded at 1.5px regardless of the size slider, so dragging the size control doesn't make the dots bigger, it only spaces them further apart. That's a deliberate design choice: it keeps the dots looking like a fine texture (think dot-grid notebook paper) instead of ballooning into large circles at bigger tile sizes. The stripes pattern is a repeating-linear-gradient fixed at a 45-degree angle, where the colored band's width is calculated as one quarter of the tile size (Math.round(size/4)) and the transparent gap fills the rest. The grid pattern layers two separate linear-gradient calls, one producing horizontal 1px lines and one producing vertical 1px lines, both sized to the same tile, so they intersect into a graph-paper look. Checkerboard is the most involved: it stacks four 45-degree diagonal gradients, two mirrored pairs, each offset by half the tile size using background-position, so the diamonds from one gradient fall exactly into the gaps left by the others.
Why gradients instead of an image file
A tiled PNG or SVG background needs an HTTP request, has a fixed pixel resolution that can blur on high-DPI screens if not doubled up, and adds bytes to the page. A gradient-based pattern is pure text inside your stylesheet, it costs nothing to load, renders identically on a 1x or 4x display, and can be recolored instantly by changing two hex values. The tradeoff is that gradient patterns are limited to geometric shapes that gradients can express, straight lines, circles, and diagonal bands. Anything organic (hand-drawn textures, noise, irregular shapes) still needs an image or SVG.
The checkerboard's four-layer trick
A single diagonal gradient only produces stripes, not squares. To get alternating checker squares, this tool layers two gradients tilted at +45 and -45 degrees, each starting its colored band at the 25% mark and ending at 75%, which carves out triangular halves that combine into diamonds. Then it duplicates that pair but shifts the background-position by half a tile both vertically and horizontally, filling in the diamonds that the first pair skipped. The result reads as a checkerboard even though nothing in the CSS ever draws a literal square.
A real limitation: no alpha channel from the color pickers
The background and pattern color inputs are native <input type="color"> elements, and that HTML input type only accepts and returns 6-digit hex values, it has no built-in alpha slider. So every pattern generated here is fully opaque. If you want a semi-transparent pattern, for example a subtle dot overlay on top of a photo, you'll need to manually convert the copied hex color to rgba() or add an 8-digit hex alpha suffix (like #c4181880) after pasting the CSS into your project.
Browser support and where to use it
Multi-layer background gradients have been supported since the CSS Backgrounds and Borders Module Level 3 spec landed in every major browser (IE10+, all modern Chrome/Firefox/Safari/Edge), so there's no vendor-prefix concern here. These patterns work well as section dividers, card backgrounds, loading-state placeholders, or subtle texture behind hero text, but for large photographic backgrounds you're generally better off with an actual image, gradients are cheap per-pixel to compute but very fine repeating patterns can add a small rendering cost on low-powered devices.
Frequently Asked Questions
Why don't the dots get bigger when I increase the size?
The dot radius is fixed at 1.5px in the underlying radial-gradient call. The size slider changes the background-size tile, which controls the spacing between dots, not the dot's own radius. Larger size values spread the dots further apart rather than enlarging them.
Can I make the pattern color semi-transparent?
Not directly from this tool. The color pickers are native HTML <input type="color"> elements, which only support opaque 6-digit hex values. To get transparency, copy the generated CSS and manually change the hex color to an rgba() value or append two extra hex digits for alpha, for example #c4181880 for 50% opacity.
Will these patterns look sharp on Retina or 4K screens?
Yes. Since every pattern is drawn with CSS gradients rather than a raster image, it's rendered at whatever resolution the display needs, with no blurring, no need to supply 2x or 3x image variants.
Do I need any vendor prefixes for these to work in older browsers?
No. Multiple layered background gradients have been part of the CSS Backgrounds and Borders Level 3 spec and supported without prefixes in all major browsers since Internet Explorer 10, so the copied code works as-is.
Why does the checkerboard pattern need four gradient layers instead of one?
A single diagonal gradient can only produce stripes or triangular halves. This tool combines two mirrored 45-degree gradients to form diamond shapes, then duplicates that pair with a half-tile position offset to fill in the remaining gaps, producing the alternating checker look without ever drawing a literal square.
Can I use these patterns as a full-page background instead of just a section?
Yes, apply the generated CSS to the body selector instead of a specific element. Because the pattern is a repeating gradient rather than a fixed-size image, it will tile seamlessly across any viewport width without stretching or repeating artifacts.