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.
229 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.
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 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.
