Generate pure CSS background patterns using gradients with stripes, dots, checkers, and geometric designs.
This tool composes background patterns from pure CSS gradients: repeating-linear-gradient for stripes, radial-gradient for dots, and layered gradients for checkers and grids. You choose the colors, angle, and repeat size, and the result is a ready-to-paste declaration, not an image file - so the pattern loads with zero extra requests and stays crisp at any zoom. The surprise is usually tiling: dots and checkers repeat according to background-size, and skipping that declaration leaves one oversized dot stretched across the whole element.
A concrete input and expected output from the current implementation.
Input
Pattern: stripes. Angle: 45 degrees. Stripe color: #e63946. Ground color: #f1faee. Stripe width: 20px.
Expected output
background-color: #f1faee; background-image: repeating-linear-gradient( 45deg, #e63946 0, #e63946 20px, #f1faee 20px, #f1faee 40px );
Stops at 20px and 40px along a 45-degree axis mean each visible stripe is 20px wide, red and cream alternating with a 40px repeat period. Because repeating gradients extend infinitely, the pattern covers any element size with no seams; only the tool's formatting (shorthand properties, comments) would differ in what you copy.
A repeating-linear-gradient paints color stops along an axis set at the chosen angle and repeats that sequence forever in both directions, so the pattern never ends and never shows a seam. Hard edges need two stops at the same position: one ends the first color, the next starts the second. Since the axis runs perpendicular to the stripes, each stripe's on-screen width equals the stop spacing.
Dots are a radial-gradient drawing one circle; checkers are two linear-gradient layers offset by half a tile. These draw a single tile of the pattern, so the repeat comes from background-size, which fixes the tile dimensions, plus background-position for stacked layers. Miss background-size and the layer stretches across the whole element: a 'dot' pattern renders as one giant dot.
Not reliably. Outlook renders messages with a Word-based engine that does not support CSS gradients, and other clients support them inconsistently. If the pattern matters in email, use a small repeating PNG as the background-image and keep the gradient version for the web page, or test the message in each client you target.
For stripes, multiply every stop position: double the width means 20px and 40px become 40px and 80px. For dots, change background-size to move the dots apart and the gradient's radius to resize the dots themselves; for checkers, change background-size and keep background-position at half the tile. The angle never needs to change.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.