65+ Awesome CSS Background Patterns (Free Code + Demos)

Just a simple page with a blue squares gradient background and some minor page filling.

Grid, flex & background patterns

A rainbow, geometric repeating background for your favorite HTML element.

Pure CSS, simple and compact method, no SVG, no images other than CSS gradients. Uses the mask compositing technique I described in so much detail in this CSS-Tricks article. Some of these background patterns only work in browsers that support conic gradients natively.

Fully functional only if conic-gradient() has native support (so Chrome only). Dedicated to the memory of someone special who passed away this January.

A neat little wave pattern with SVG and CSS. Fair warning: This isn't optimized at all. I don't recommend putting something like this in production.

Playing around with gradients, mostly

Modern Bricks!

Design was mostly ripped off from the canvas-based pen Neon Hexagons by Mihailescu Marian Valentin (@mariandev). I used SVG patterns & filters, plus CSS animations, to create a similar effect, and then started tweaking stylistically. If the filters are choking your computer, just hove...

Read More

See the book here.

gradients, shapes, rgba... inspired by the work of Chris Spooner http://blog.spoongraphics.co.uk/tutorials/how-to-create-an-easy-abstract-blur-pattern-design

This idea came to me this year. I really love Lea Verou's CSS3 patterns gallery, so I decided create my own CSS3 background gallery to practice my CSS skills and there's no better topic than fruits for patterns :D. I hope codepen enjoy this backgrounds.

Simple technique to create a dot pattern or dot grid background. Support: all modern browsers and IE9+

Idea from this tweet - minimum number of stops needed to recreate the shirt pattern. Fun flight. @svgeesus & I debated what's the min # of stops needed to make this guy's shirt pattern w/ CSS gradients

Pattern for header

attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients). my math is top notch stuff ['-____-]

A background pattern for a Quote widget. Based on Lea Verou snippets.

Sass pattern mixin with CSS background-blend-mode

I can't believe that we can get it with gradients! Clean CSS.

Css only. Too complicated to be used in real code : )

pure CSS blueprint pattern using CSS3 linear-gradients

Tried to make this http://imgur.com/etTzJp8 pattern and failed spectacularly.

CSS Secrets - Complex background patterns