CSS background patterns replace heavy image files with infinitely scalable, pure-CSS textures built entirely from gradient functions. They allow developers to create complex geometric designs — stripes, checkerboards, polka dots, and woven textures — using only native browser rendering without external assets.
Browse this collection of CSS background patterns to master zero-image texture rendering and build visually rich interfaces that remain lightweight and themable.
Table of Contents:
A pure CSS diagonal optical illusion that distorts parallel lines without JavaScript. Combines repeating-linear-gradient grid stripes with rotated conic-gradient elements on body::before and body::after pseudo-elements. Hovering transitions the @property --color variable to transparent, removing the visual interference to demonstrate that all diagonal lines are strictly parallel.
Chrome
Edge
Safari
Firefox/*
optical effect
The diagonal black lines are parallel, but they look like they are not. Mouse over to reveal
*/
@property --color {
syntax: '<color>';
initial-value: #f00;
inherits: true;
}
body {
--color: #000;
margin: 0;
font-size: 1vmax;
height: 100vh;
overflow: hidden;
transition: --color 1s;
background: #fd5;
}
body:hover {
--color: #0000;
}
body::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 300em;
height: 300em;
background:
repeating-linear-gradient(#0000 0 18em, #000 0 20em),
conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em;
transform: skewY(-45deg);
}
body::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 300em;
height: 300em;
background:
repeating-linear-gradient(#0000 0 18em, #000 0 20em),
conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em;
transform: rotate(90deg) skewY(45deg) translate(0.25em, 12em);
}
background: #fd5 on body. Adjust illusion tile color --color: #000 and initial value initial-value: #f00 inside @property --color. Tweak hover reveal state via --color: #0000.repeating-linear-gradient(#0000 0 18em, #000 0 20em) stop offsets. Alter distortion block positioning through conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em inside pseudo-elements.font-size: 1vmax on body. Adjust tilt severity by modifying transform: skewY(-45deg) on body::before and transform: rotate(90deg) skewY(45deg) on body::after.
An optical illusion rendered entirely in CSS using zero HTML elements. Employs pseudo-elements with skewed repeating-linear-gradient and conic-gradient layers to create the perception of non-parallel lines. Hovering over the viewport transitions the @property --color variable to transparent, instantly disabling the visual distortion and revealing parallel horizontal lines.
Chrome
Edge
Safari
Firefox/*
optical effect
The black lines are parallel, but they look like they are not. Mouse over to reveal
*/
@property --color {
syntax: '<color>';
initial-value: #f00;
inherits: true;
}
body {
--color: #f55;
margin: 0;
font-size: 1vmax;
height: 100vh;
overflow: hidden;
transition: --color 1s;
}
body:hover {
--color: #0000;
}
body::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 300em;
height: 300em;
background:
repeating-linear-gradient(#0000 0 18em, #000 0 20em),
conic-gradient(at 1.25em 10em, #0000 75%, var(--color) 0) 0 -6em / 2.5em 20em;
transform: skewY(-45deg);
}
body::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 300em;
height: 300em;
background:
repeating-linear-gradient(#0000 0 18em, #000 0 20em),
conic-gradient(at 1.25em 10em, #0000 75%, var(--color) 0) 0 -6em / 2.5em 20em;
transform: rotate(90deg) skewY(45deg) translate(0.25em, 12em);
}
--color: #f55 on body and initial-value #f00 inside @property --color. Update hover transparency target --color: #0000 to alter reveal contrast.repeating-linear-gradient(#0000 0 18em, #000 0 20em) offsets inside body::before and body::after. Modify pattern angles via conic-gradient(at 1.25em 10em, ...) tile dimensions / 2.5em 20em.font-size: 1vmax on body. Tweak illusion distortion strength by adjusting skew angles transform: skewY(-45deg) and skewY(45deg).
This lightweight grid layout styles nested cards with an organic paper feel entirely through vector code. It utilizes a base64-encoded SVG filter featuring specular lighting and turbulence to inject a matte noise texture over solid colors. By applying an offset ::after pseudo-element rotated by 8deg with mix-blend-mode: overlay, each card gains a shifted tactile depth layer without heavy graphics.
Chrome 105+
Edge 105+
Firefox 103+
Safari 16+See the Pen Textured 3D Layered Grid Cards.
An interactive graph notebook paper pattern drawn entirely via stacked, layered CSS gradients. By combining major and minor linear grid lines, radial cross masks, and corner border offsets, it forms a fully customizable procedural background. It utilizes CSS @property Houdini variables to smoothly transition gap sizing updates, alongside dynamic theme and color hue tuning.
Chrome 110+
Edge 110+
Firefox 128+
Safari 16.4+See the Pen Procedural CSS Gradient Grid Background.
An interactive pure-CSS representation of the classic Café Wall optical illusion. Built with zero HTML markup, the layout layers gray linear separators and offset black-and-white conic gradients to create a pattern where perfectly parallel lines appear tilted. Hovering over the page realigns the checkerboard columns to immediately debunk the cognitive illusion.
Chrome 69+
Edge 79+
Firefox 83+
Safari 12.1+See the Pen Pure CSS Café Wall Optical Illusion.
An elegant pure-CSS implementation of the classic Ehrenstein optical illusion. Requiring zero HTML, the stylesheet utilizes offset conic-gradient() coordinates to render a repeating grid of vertical and horizontal lines. When looking at the resulting pattern, the human visual system automatically completes the missing intersections, perceiving non-existent bright white discs.
Chrome 69+
Edge 79+
Firefox 83+
Safari 12.1+See the Pen Pure CSS Ehrenstein Optical Illusion.
This is a Retro Airmail Envelope Border. It wraps a container with continuous diagonal red and blue stripes. Its function is to provide a nostalgic, thematic framing for content without relying on external raster image assets.
Chrome 108+
Edge 108+
Firefox 101+
Safari 15.4+See the Pen Retro Airmail Envelope Border.
This is an Optical Illusion CSS Background Pattern. It generates a complex, interlocking geometric tessellation using only mathematical gradient overlays. Its function is to provide a visually striking, lightweight background texture without requiring external image assets.
Chrome 69+
Edge 79+
Firefox 83+
Safari 12.1+See the Pen Optical Illusion CSS Background Pattern.
This is a Pulsing Circle Optical Illusion. It generates a static, high-contrast geometric pattern that exploits peripheral vision to create a false sense of motion. Its function is to serve as a lightweight, visually arresting background or artistic centerpiece using only a handful of CSS properties and zero JavaScript.
Chrome 69+
Edge 79+
Firefox 83+
Safari 12.1+See the Pen Pulsing Circle Optical Illusion.
This is the Stepping Feet Optical Illusion. It demonstrates how high-contrast patterns interfere with human motion perception. Two colored blocks move at identical, constant speeds, yet appear to stagger and “step” like feet. A hover interaction removes the background grid to expose the mathematical reality of their parallel movement.
Chrome 105+
Edge 105+
Firefox 121+
Safari 16.4+See the Pen Stepping Feet Optical Illusion.
This is a Cinematic Parallax Reactive Navigation Menu. It synchronizes large-scale typographical navigation with multi-layered background shifts. Its function is to transform a standard menu into a high-end atmospheric gateway for editorial or premium portfolio websites, using user interaction to drive the visual narrative.
Chrome 80+
Edge 80+
Firefox 75+
Safari 13.1+See the Pen Cinematic Parallax Reactive Navigation Menu.
This Fading Grid Gradient Background creates a clean, architectural aesthetic suitable for SaaS landing pages or documentation sites. It features a technical vertical grid pattern that gently dissolves into a vibrant teal-and-purple gradient at the bottom. The effect mimics a “horizon” line, adding depth and structure to an otherwise flat page without using any images.
Chrome 80+
Edge 80+
Firefox 53+
Safari 15.4+See the Pen Fading Grid Gradient Background.
An elegant, geometrically complex background in blue tones that looks like a vector illustration but weighs only a few bytes and scales easily.
See the Pen CSS-Only Pattern: Circles.
A tartan plaid pattern generated entirely with CSS.
See the Pen CSS-Only Pattern: Squares in Squares.
A pure CSS pattern created by overlaying five radial-gradient declarations on a single element. The main feature is that all ring sizes and their count depend on a couple of CSS variables, making the pattern fully scalable using calc().
See the Pen Scalable CSS Radial Gradient Pattern.
A pattern generated with just one background property, showcasing advanced use of CSS gradients and background-size to create a complex, repeating texture, with flexible customization via custom CSS properties.
See the Pen Intersecting Diagonals Pattern.
A lightweight and effective demo showcasing a complex background pattern created entirely with pure CSS gradients. The result is a dynamic, scalable background without the need for any image files or JavaScript.
See the Pen CSS-Only Pattern - Waves.
A complex geometric CSS pattern constructed from multiple layers of conic-gradient and radial-gradient. This seamless background offers a scalable, vector-quality tessellation design that is fully controllable via CSS variables for easy customization.
See the Pen Squiggle Waves Tessellated Pattern – Pure CSS.
A sophisticated geometric CSS background created with layered conic gradients and custom properties for seamless styling. This performant pattern is fully scalable and provides a lightweight, code-based alternative to images for modern UI/UX design.
A sophisticated striped background pattern built with pure CSS using the linear-gradient hard-stop technique. This lightweight snippet offers a high-performance, responsive UI solution that mimics complex textures without the need for external image assets.
See the Pen Chocolate Wafer CSS Background.
Common questions about integration, browser support, and customizing these components.
% or vw in background-size combined with CSS Container Queries to scale the pattern unit proportionally to the parent container. This ensures seamless pattern density across viewports without hardcoded breakpoints.background-color fallback behind the gradient pattern to guarantee readability. Use the contrast-color() function or OKLCH color space to programmatically adjust text color against the dominant pattern hue.background-color as the first declaration, then override it with the gradient pattern. Browsers that ignore the gradient will display the solid color, ensuring content remains readable without feature detection overhead.@property, which bypasses main-thread repaints. Avoid animating background-size or background-position directly, as these trigger layout recalculations on every frame.