Back to library

Preview of CSS Pattern

Site

Backgrounds, Effects & CSS Oddities · Background patterns

CSS Pattern

157 background patterns built entirely from CSS gradients, each parameterised with custom properties for size and colour.

Why it’s a gem
No images, no SVG, no requests: patterns that are literally three lines of CSS

Visit css-pattern.com

Author: Temani Afif (@ChallengesCss)
Type: Website
License: free
Added: Aug 17, 2026
Domain: css-pattern.com

css patterns gradients background

More from Background patterns

Preview of SVG Backgrounds

SVG Backgrounds

Collection of customisable SVG backgrounds, shape dividers, doodles and preloaders with export presets for Webflow, Elementor and plain CSS.

Unknownfreemium

Preview of topolines

topolines

One React component that draws animated topographic contour backgrounds on the GPU, with six presets and a live playground.

Preview of Hero Patterns

Hero Patterns

Library of tileable SVG background patterns with live foreground colour and opacity controls, copied out as data-URI CSS.