CSS Background Patterns with Gradients

CSS Background Patterns with Gradients

Repeating CSS background patterns require nothing more than gradient functions and background-size, eliminating the need for image files or SVG markup in decorative texture work. Combining repeating-linear-gradient(), repeating-conic-gradient(), and radial-gradient() produces stripes, grids, diagonal tiles, and dot patterns entirely in CSS.

Stripe patterns use repeating-linear-gradient() with hard stops at the tile boundaries.¹ Checkerboard patterns use repeating-conic-gradient() with two 90-degree sectors. Dot patterns use radial-gradient() with circle closest-side and background-size for spacing.² Layering two gradient patterns with comma-separated background-image values creates cross-hatching and grid textures. Building on this, CSS custom properties make pattern parameters like stripe width, dot size, and color easily configurable at the component level.

Diagonal stripes with repeating-linear-gradient()

Diagonal stripes use repeating-linear-gradient() at an angle with hard stops at the tile boundaries.³ A 45-degree stripe alternating two colors: repeating-linear-gradient(45deg, blue 0px, blue 10px, transparent 10px, transparent 20px). The tile runs from 0px to 20px; blue occupies the first half. The hard stop at 10px creates a sharp edge between the blue and transparent regions, which is the defining characteristic of a stripe pattern as opposed to a smooth gradient transition.

Anti-aliasing at diagonal edges

Hard stops at exactly the same pixel value produce visible aliasing at angles on sub-pixel displays. A one-pixel softened transition (shifting the second stop by 1px) reduces aliasing: blue 0px, blue 9px, transparent 10px, transparent 20px. Yet this blurs the stripe edge slightly. For large stripe widths (above 12px), the one-pixel blur is imperceptible. For narrow stripes (below 6px), the aliasing may be more visually acceptable than the blur. Building on this, stripes at exactly 45 or 135 degrees alias less than other angles because the diagonal runs through sub-pixels at a consistent rhythm.

Because the hard-stop edge is what defines the stripe, the anti-aliasing choice matters most on narrow widths. For stripe widths above about 10px, the one-pixel softened transition is invisible, so the cleaner edge is worth the tiny blur. Below that range, the jagged edge often reads as intentional texture rather than a defect. Since the tiled result previews at the exact background-size, spot aliasing on a diagonal gradient stripe while you are still choosing the width rather than after the pattern is already in your stylesheet.

Checkerboard with repeating-conic-gradient()

A checkerboard requires alternating equal-area color sectors. repeating-conic-gradient(black 0deg 90deg, white 90deg 180deg) produces four quadrants alternating black and white. Applying this to a square element with background-size: 40px 40px tiles the checkerboard at 40-pixel intervals. Applying this to a square element with aspect-ratio: 1 ensures the checkerboard cells remain geometrically square rather than stretching into rectangular blocks on non-square containers, which preserves the intended visual rhythm of the pattern across all viewport sizes.

Dot grid and polka pattern

Dot patterns use radial-gradient() with circle closest-side and background-size for spacing. radial-gradient(circle closest-side, black 50%, transparent 50%) with background-size: 20px 20px places a black circle at the center of each 20x20 tile. Reducing the 50% inner stop to 40% shrinks the dot diameter while keeping the tile size the same. Consequently, the dot size and dot spacing are independently controllable without changing the gradient function. The closest-side size keyword ensures the circle touches the nearest edge of the tile without overflowing, which prevents adjacent dots from bleeding into each other. For a more organic polka-dot look, using two offset dot layers at half the tile width creates a hexagonal packing that reads as a natural scatter rather than a rigid grid, and the offset value equals exactly half the tile width so the dots nestle into the gaps of the opposing layer.

Hexagonal dot offset

Using a 45-degree offset background-position on a second dot layer offsets the dot grid for a hexagonal arrangement. This denser packing reads as a more natural polka pattern than the square grid and avoids the visual repetition that makes square dot patterns look mechanical at a glance. The offset value equals half the tile width, so a 20-pixel tile uses a 10-pixel offset on the second layer. Combining both layers via comma-separated background-image values produces the full hexagonal dot field in a single CSS declaration.

Grid, cross-hatch, and pattern scaling

Layering two perpendicular line gradients with comma-separated background-image values produces a grid.⁴ A horizontal line pattern: repeating-linear-gradient(to bottom, transparent 0px, transparent 19px, rgba(0,0,0,0.1) 19px, rgba(0,0,0,0.1) 20px). A vertical line pattern uses to right with the same stops. Combining both produces a grid with 20-pixel cells. Cross-hatch textures use two diagonal stripe patterns at complementary angles: one at 45deg and one at -45deg (or 135deg), and limiting to two layers avoids most moire issues on high-DPI displays.

Cross-hatch textures use two diagonal stripe patterns at complementary angles: one at 45deg and one at -45deg (or 135deg). Each layer uses a thin transparent stripe on a partially transparent base. The two layers intersect at right angles, producing diamond-shaped hatch marks. Limiting to two layers avoids most moire issues on high-DPI displays, and reducing the opacity of each stripe layer to 0.05 to 0.15 produces a subtle texture rather than a strong graphic pattern.

background-size controls the tile dimensions of any repeating CSS gradient pattern. Setting background-size: 24px 24px produces a fixed 24-pixel tile; setting it to 5% 5% produces tiles proportional to the element's dimensions. CSS custom properties make pattern scale configurable at the component level: declare a size variable and reference it in background-size to change the tile size across multiple elements by updating a single value.

For stripe patterns where alignment at a specific edge matters, background-position: top left aligns the tile origin to the element's top-left corner. When building a pattern system that needs to support both fixed and fluid tile sizes, using a CSS custom property with a default pixel value and overriding it with a percentage in a media query gives you responsive pattern scaling without duplicating the gradient declaration. Defining pattern tokens as named custom properties for tile size, stripe width, and color allows every component to reference the same pattern constants while overriding individual values through scoped custom property assignments.

CSS gradient pattern performance on high-DPI displays

Retina and high-DPI displays render CSS gradient patterns at twice or more the physical pixel density.⁵ Hard stops in a repeating-linear-gradient() at 45 degrees produce sub-pixel anti-aliasing at the stripe edge on lower-density screens. On a 2x Retina display, the browser renders with a larger virtual pixel grid before scaling down, which improves anti-aliasing and makes diagonal edges noticeably sharper compared to a 1x screen.

Pattern performance on high-DPI displays is generally efficient. The browser computes the gradient tile once and tiles it via the compositor, regardless of tile count. Very large elements with many tiles at small background-size values trigger more frequent tile texture uploads to the GPU. Keeping background-size above 8px and limiting pattern layers to two or three avoids unnecessary GPU texture overhead on mobile hardware. Chrome DevTools' Layers panel shows gradient-patterned elements as GPU layer candidates; for an element showing unexpectedly high GPU memory use, increasing the background-size value reduces the tile count and the associated texture memory.

When to use this

Use CSS gradient patterns for decorative backgrounds on hero sections, card surfaces, and empty-state illustrations where image assets would require design tooling and HTTP requests. Avoid dense patterns behind body text as they reduce readability.

Examples