230+ CSS Background Patterns: Free Examples & Code Snippets

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

An elegant, geometrically complex background in blue tones that looks like a vector illustration but weighs only a few bytes and scales easily.

A tartan plaid pattern generated entirely with CSS.

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().

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.

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.

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.

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.

A sophisticated geometric CSS pattern built with layered repeating-conic-gradient to create a complex, seamless background texture. This performant snippet leverages CSS variables for easy customization of scale and color hue, offering a modern and lightweight UI/UX solution.

A sophisticated geometric CSS pattern crafted with layered conic gradients and precise hard-stops. This snippet leverages CSS custom properties for effortless scaling and theme customization, providing a high-performance, lightweight background solution with a zero-asset footprint.

Synthetic texture formed by overlaying two distinct gradients. The hard-light combination blends a fine diagonal pattern with a smooth vertical transition, generating a deep, structured background effect without external media assets.

The use of the atan() function in SCSS to calculate the angles for a conic-gradient, which allows for the creation of a complex geometric pattern. The entire page background is set with a single background property, demonstrating the power and conciseness of modern CSS.

An intricate pure CSS circular pattern built with multi-layered radial gradients and hard-stops defined via custom properties. This technique delivers a seamless, image-free vector texture, ensuring high rendering performance and easy customization for modern web design.

A scalable geometric CSS pattern created with layered radial gradients and custom properties for dynamic control over size and color. This lightweight, image-free solution provides a high-performance background ideal for modern and responsive UI/UX design.

A complex geometric CSS pattern built with layered conic, radial, and linear gradients for a sophisticated tiling effect. This performant snippet leverages CSS variables and the calc() function, providing a lightweight, fully customizable solution for modern and scalable UI design.

An intricate geometric pattern built with layered conic gradients and modern CSS custom properties. This snippet showcases a seamless tiling technique that provides a scalable, vector-quality background, ensuring high frontend performance and easy customization.

A complex geometric CSS pattern built with layered conic, radial, and linear gradients for a sophisticated tiling effect. This performant snippet leverages CSS variables and the calc() function, providing a lightweight, fully customizable solution for modern and scalable UI design.

A high-performance radial gradient CSS pattern that creates complex concentric visual effects with minimal code. This lightweight, image-free background is fully customizable via CSS variables, making it perfect for modern and scalable web projects.

Twenty-plus stacked repeating-conic-gradient layers on a single background property, plus a linear-gradient base — all tiling at 100px × 100px. Gradients are clipped to narrow angle arcs (2deg–31deg), creating leaf-like shapes that repeat across the viewport. A subtle blur and contrast filter ties the layers together into a tessellated cactus landscape texture. Zero elements, zero JS.

A woven quilt texture built from conic gradients positioned at incremental vertical offsets (50% through 90%), creating diamond-shaped weave intersections. Three purple tones cycle through a repeating-linear-gradient base. “Hide” layers mask the top and bottom halves so only the interlocking center section is visible. Zero elements, pure background math.

A tileable pattern of nested oval shapes built from conic gradients at precise positions — 25%, 50%, and 75% — creating interlocking blue and orange curved forms. Thin grid lines separate each 160×80px tile. A horizontal linear gradient splits the base into blue top, orange bottom. Zero HTML elements, pure background composition.

Conic gradients positioned at 25%, 50%, and 75% of each 160×80px tile create nested rectangular arcs in alternating blue and orange. A horizontal linear grid overlay adds 1px separator lines. The base blue-to-orange gradient fills the background. The result looks like a 3D wavy rectilinear pattern — zero HTML, pure background layering.

Three gradients stacked on <html>: a repeating-conic checkerboard (12em), a diagonal linear gradient (6em), and a radial gradient of concentric rings with a grey stroke (6em). Combined via difference and overlay blend modes, they produce a connector-like grid of interlocking circles. Ana Tudor’s signature minimal-gradient approach.

Two conic gradients, same color stops (peach, brown, transparent), different angles and sizes. A base 50px tile with from 180deg sits under a 150px repeating layer with from 90deg. The mismatch between the two grids creates an unexpected moiré-like geometric pattern. Temani Afif’s signature — minimal code, surprising output.

A 100px tile of three radial gradients. Two opposing corner gradients — top-right and bottom-left — use alternating red and dark-red bands to form curved pupil-like shapes. A small centered circle completes each “eye”. The result is a grid of staring faces. Temani Afif at his most playful.

A 100px tile of radial-gradient circles — transparent center, brown ring, green-yellow outer — laid over a 200px diagonal repeating-linear-grid in the same colors. The rings sit at each tile corner, creating a polka-dot grid with a woven diagonal backdrop. Two layers, two gradients.

Four conic gradients at from -30deg, each with a 240deg arc of a different color — white, green, transparent, dark blue — tiling at 126×84px. A semi-transparent black linear gradient overlays the bottom half, adding a folded shadow effect. The alternating diagonal segments create a continuous zigzag ribbon. Four layers, one tile.

Five conic gradients with precise fractional positions (250%/3, 50%/3, 200%/3, etc.) create a repeating 3D zigzag tile in black, grey, and white. The pattern uses tan(30deg) for hexagonal geometry calculations, with a @supports fallback for older browsers. Multiple staggered copies of each gradient layer produce an isometric folded ribbon effect.

Twenty-two radial and linear gradient layers on a 160×160px tile in two purples. Corner and edge circles at varying sizes (7%, 8%, 13%) form a dotted border. Diagonal crosses, a center circle, and 4%-thick horizontal/vertical lines weave into a concentric geometric ornament. Zero HTML, pure background stacking.

Four conic gradients at precise fractional positions (66.66%, 33.33%, 83.335%, 16.665%) tile at 105×122px to form isometric Tetris T-shapes in four greens. Each gradient covers specific 60-120° arcs, creating the 3D extruded faces — top, sides, and shadow. A single tiled background, zero HTML, pure geometric conic layering.

Eighteen conic gradients tile at 188×108px to render isometric floating cubes in four grey-blue tones. Each cube face is a separate conic layer at a specific 60-120° arc — top, front, side, and shadow planes. Gradients are duplicated to prevent edge bleeding at tile boundaries. Pure CSS, zero HTML, meticulous fractional positioning.

Six conic gradients tile at 70×246px to form isometric 3D cuboids in three greens. The same set of gradients is duplicated — one copy offset by half the tile dimensions, creating an interspersed staggered layout. Each cuboid face uses specific 35-180° arcs for top, sides, and depth. Pure CSS, dual background trick, no HTML.

A knitted chevron textile pattern built from four conic gradients and two repeating-linear gradients. Conic layers at fractional positions (100%/6, 500%/6) form interlocking purple V-shapes. Diagonal linear stripes — purple and blue — create the woven background. The 0.866 multiplier in tile dimensions comes from sin(60°), hinting at an underlying hexagonal grid. Zero HTML, six backgrounds.

Eleven conic gradients tile at 198×168px to build a 3D zigzag landscape in purple and violet tones. Gradients are placed at decreasing left-edge positions (100% → 15%) with precise arc angles (84–217°), forming overlapping folded planes. The result simulates staggered geometric terrain with depth — no HTML, pure conic layering.

A yellow-and-black hazard barricade pattern on a 105×210px tile. Four conic gradients create the interlocking jagged stripes — two yellow, one amber, one black — while a diagonal linear gradient slices the tile into alternating color blocks. A semi-transparent overlay adds a subtle top shadow. Fits the “police line” visual trope with zero elements.

A checkerboard-like pattern of rounded diamond shapes in beige and silver on a dark charcoal ground. Two conic gradients — one beige, one grey — share the same at 45% 40%, #0000 75% clip. Four copies offset across a 200×100px tile create a staggered grid. Six lines of meaningful CSS.

A complex geometric background implemented in pure CSS using layered radial and conic gradients. By leveraging CSS variables, this pattern is easily scalable and customizable for any color scheme in modern web UI designs.

Nineteen background layers — radial gradients for rounded tile tops, conic gradients for overlapping edges, and a linear bottom strip — tile at 100×240px. The entire set is duplicated with a half-size offset to create staggered roof tiles in terracotta tones with dark shadows. Zero HTML, pure background stacking with dual-position trick.

A repeating arrow/chevron pattern in red and dark purple. Two conic gradients at opposite corners (75%/75% and 25%/25%) each quarter-fill with alternating colors, creating directional V-shapes. A repeating-conic base fills the gaps.

33 layered linear gradients on a single #tangled div, all tiling at 12em. Each gradient uses 4-5 narrow color stops (transparent → navy → white → navy → transparent) at varied angles — 5°, 7°, 30°, 70°, 80°, 100°, 110°, 115°, 119°, 127°, 130°, 131°, 133°, 140°, 170°. The result is a dense, hand-crafted tangle of intersecting navy-and-white ribbons on a powder-blue ground. Zero JS, just painstakingly tuned percentages.

Four backgrounds on <html>: radial gradients at 37.5% create green wavy arcs with clipped 39-94% color stops, offset copies fill the grid. A small radial dot layer and a repeating-conic checkerboard in red-brown and dark grey form the base. The 160×120px tile combines curvilinear waves with rigid geometric blocks.

A 90px tile built from a radial-gradient ring (yellow inside, dark pink outside) and four conic corner pieces at 18.75% offset — each filling a quarter-circle in dark pink.

Six pattern variations and three map variations, all built from CSS custom properties.

Thirteen background layers tile at 265×234px to render isometric mini cubes in a blue-grey palette. Six conic gradients carve the 3D faces — top, sides, bottom, and diagonal slices — at precise fractional positions (24.5%, 49.5%, 50%, 74.5%). Two repeating-conic noise layers add surface grain. Linear gradients define edges and shadows. Zero HTML, pure CSS geometry.

A scalloped tile pattern in red-brown and dark grey. Two radial gradients at opposite corners (30%/bottom and 70%/top) use clipped 67–98% color stops to form curved arcs — like overlapping semi-circles. A repeating-linear stripe base fills the 160×96px tile.

A staggered scalloped tile pattern in orange and teal. A single radial gradient with clipped 67–98% color stops creates curved arcs, duplicated with a half-tile offset (80×48px) to form overlapping semi-circles. A repeating-linear stripe base fills the 160×96px tile.

Fifteen conic gradients tile at 154×266px to form isometric vertical blocks in four greens. Two reusable gradient variables (--b1, --b2) are each duplicated four times at offset positions. Conic arcs at 60-180° carve the 3D planes — top faces, front sides, and recessed shadows. A central gradient ties the column together. Zero HTML, pure conic geometry.

A diagonal plaid pattern in dark grey and terracotta on a 100px tile. A linear-gradient(135deg) creates a diagonal dark stripe across the tile (20–30% fill). A repeating-linear-gradient(45deg) adds alternating dark grey and terracotta bands.

A diagonal grid of green diamonds on a dark teal ground. A linear-gradient(45deg) creates the large diamond frames (10–40% fill). Two repeating-linear-gradient layers — at ±45° — produce the small internal grid using a custom variable --g with teal bands at -5% to 5%. The result is a woven bamboo-like pattern.

Ten layered backgrounds on a 100×100px tile recreate a dark diamond-buttoned upholstery texture. Radial gradients form quilted bumps at staggered positions, diagonal linear gradients create the seam creases, and darker overlays add shadow depth.

A conic gradient at 90% 40% clips a quarter-circle in brown — duplicated at 50px 50px offset on a beige ground. The two copies tile at 100×100px, creating a four-leaf clover pattern where the brown arcs meet at the center.

Four radial gradients at the four corners of a 138×115px tile — top-left, top-right, bottom-left, bottom-right — each drawing a quarter-circle in deep pink on a light blue ground. The corner circles overlap at the tile center, creating a four-petal flower-like shape.

A 100px tile of two offset radial gradients — each creating concentric rings in yellow, dark blue, and teal with precise %-stop bands (43-83%). The second copy is shifted by 50px for a staggered effect. A ::before overlay fades the dark blue background in and out on a 4s infinite loop, giving the pattern a subtle pulsing depth. CSS only, one div.

Three vertical linear-gradient stripes — red, blue, dark blue — each with a different width (7px, 23px, 23px) and tiled at three distinct background-size values (43px, 61px, 89px). Since 43, 61, and 89 are prime, their periods never align — producing an irregular, pseudo-random stripe pattern. The Cicada Principle in 8 lines of CSS.

A floral tile pattern built from 22 radial-gradient circles on a 220×220px grid. Four groups form a flower: group one (center petal ring), group two (dark corner petals), groups three and four (outer accent dots). A larger central circle in cream ties the composition. Clicking swaps the palette — 8 color schemes cycle via JS. Pure CSS pattern with a palette picker.