CSS-Only Pattern Library
A comprehensive collection of CSS-only decorative background patterns built entirely with gradients. Every pattern below tiles seamlessly using background-size and background-repeat, requires zero images, and can be customized through CSS custom properties.
Diagonal Stripes
repeating-linear-gradient at 45deg creates classic diagonal stripes. Two hard color stops at the same position produce an instant transition between colors. The repeating variant tiles the pattern automatically.
Horizontal Lines (Notebook Paper)
A single repeating-linear-gradient draws evenly spaced horizontal lines on a white background, mimicking ruled notebook paper. The trick is using a transparent-to-transparent span with a thin colored slice for each rule line.
Polka Dots
Two offset radial-gradient layers create an evenly spaced dot pattern. The second layer is shifted by half the tile size in both directions so dots fall between the gaps of the first layer.
Checkerboard
conic-gradient with four hard stops at 25% intervals produces a two-color quadrant in each tile. When repeated via background-size, the quadrants align into a classic checkerboard.
Zigzag / Sawtooth Edge
Two linear-gradient triangles placed side by side create a zigzag edge. By applying them as a background on a pseudo-element, you get a decorative sawtooth border without any extra markup.
Carbon Fiber
Layered radial-gradient and linear-gradient simulate a carbon fiber weave. A subtle radial dot grid sits on top of a striped linear gradient, all over a dark base color.
Grid / Graph Paper
Two layered linear-gradient passes — one horizontal, one vertical — draw thin lines that intersect to form a grid. Adjusting the custom properties changes line weight, spacing, and color.
Diamond / Argyle
Two linear-gradient layers rotated to opposite diagonal angles create overlapping diamond shapes. A third gradient adds the classic argyle "stitch" lines between diamonds.