Ditch heavy image files and build intricate, infinitely scalable backgrounds with pure CSS Background Patterns. The core technique involves layering multiple linear-gradient() and radial-gradient() functions within a single background-image property. By carefully controlling their background-size and background-position, you can create classic patterns like stripes, checkerboards, polka dots, and complex geometric designs. For seamless repetition, the repeating-linear-gradient() and repeating-radial-gradient() functions offer an even more powerful and concise way to define the pattern’s unit. This approach is not only incredibly lightweight but also allows for easy theming by controlling colors and sizes with CSS Custom Properties.
228 CSS Background Patterns
Fading Grid Gradient Background
demo & codeThis 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.
CSS-Only Pattern: Circles
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.
CSS-Only Pattern: Squares in Squares
A tartan plaid pattern generated entirely with CSS.
See the Pen CSS-Only Pattern: Squares in Squares.
Scalable CSS Radial Gradient Pattern
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.
Intersecting Diagonals 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.
CSS-Only Pattern - Waves
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.
Squiggle Waves Tessellated Pattern – Pure CSS
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.
3D Chocolate Bar Tessellated Pattern – No Div – 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.
Chocolate Wafer CSS Background
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.
Abstract CSS Pattern
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.
3D Shadowed Diamonds Tessellated Pattern – Pure CSS, No Divs
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.
The Half-Rombes Pattern
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.
Pure CSS Concentric Rings Tessellated Pattern
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.
Pure CSS Purple Scales Tessellated Pattern
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.
Pure CSS Leather Sofa Tessellated Pattern
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.
Pure CSS Paper Boat Tessellated Pattern
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.
Pure CSS Reptile Scales Tessellated Pattern
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.
CSS Only Intersecting Wavy Pattern
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.
Pure CSS Rain Curtain Tessellated Pattern
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.
