228 CSS Background Patterns
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.
Last updated:
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.
CSS-Only Pattern: Squares in Squares
A tartan plaid pattern generated entirely with CSS.
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().
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.
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.
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.
