30 awesome CSS Background Patterns (Collection)

With these 30 CSS Background Patterns you are sure to find the perfect background for your app or website.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Japanese cube

See the Pen Japanese cube by Tankred (@tankred) on CodePen.

#2 Steps

See the Pen CSS Background Pattern by Joshua Hibbert (@joshnh) on CodePen.

#3 Rotan weave

See the Pen Rotan weave by Jeroen Franse (@jroenf) on CodePen.

#4 Tables

See the Pen Pure CSS pattern: tablets by Ana Tudor (@thebabydino) on CodePen.

#5 Slack CSS background pattern

See the Pen Slack CSS background pattern by Marijke Luttekes (@MHLut) on CodePen.

#6 Children in Need CSS Background Pattern

See the Pen Children in Need CSS Background Pattern by Chris Smith (@chris22smith) on CodePen.

#7 CSS background pattern

See the Pen CSS background pattern (no img) by Ha Hyun Yong (@lovefield) on CodePen.

#8 Rainbow

See the Pen CSS Background Pattern by Raad Al-Rawi (@raad) on CodePen.

#9 Circles

See the Pen CSS Background Pattern – Circles by Steve Hudek (@sjhudek) on CodePen.

#10 CSS Background Pattern #1

See the Pen css background pattern #1 by vlad saling (@vlad-saling) on CodePen.

#11 Pattern, No Div

See the Pen CSS Background Pattern, No Div by Poonam Soni (@poonam-adlakha) on CodePen.

#12 Braid pattern

See the Pen Pure CSS braid pattern by Ana Tudor (@thebabydino) on CodePen.

#13 Css Pattern-Noise

See the Pen Css Pattern-Noise by Vijay (@themounthead) on CodePen.

#14 Monochromatic rhombi pattern

See the Pen Pure CSS monochromatic rhombi pattern by Ana Tudor (@thebabydino) on CodePen.

#15 Triangles

See the Pen CSS | Background pattern (triangles) by Tobias Bogliolo (@tobiasdev) on CodePen.

#16 Red Zig Zag

See the Pen CSS Background Pattern – Red Zig Zag by Steve Hudek (@sjhudek) on CodePen.

#17 Interactive crosses

See the Pen CSS Background pattern by Emile Duval (@Emile_Dvl) on CodePen.

#18 Rhombic

See the Pen Pure CSS pattern: rhombic 🔥 (under 380 bytes compiled code, minified) by Ana Tudor (@thebabydino) on CodePen.

#19 Black and white

See the Pen CSS background pattern by Dan Benmore (@dbenmore) on CodePen.

#20 Oldschool

See the Pen css background pattern by Trikyas (@trikyas) on CodePen.

#21 Points

See the Pen CSS Background pattern by drishti (@driksh) on CodePen.

#22 More pseudo random CSS background pattern

See the Pen More pseudo random CSS background pattern by Kinaly (@Kinaly) on CodePen.

#23 Cubes

See the Pen CSS Background Pattern by Josh (@joshyporkchops) on CodePen.

#24 Fractals

See the Pen css background pattern by Trikyas (@trikyas) on CodePen.

#25 Diamonds

See the Pen CSS background pattern by Erin Hales (@mcbridee093) on CodePen.

#26 Colored Stone age

See the Pen CSS background pattern by Ardy Heijnekamp (@ardyheijnekamp) on CodePen.

#27 Squares

See the Pen CSS Background Pattern by Jaydeep Khatri (@jaydeepkhatri) on CodePen.

#28 Greater, smaller

See the Pen CSS Background Pattern by jani984816 (@jani984816) on CodePen.

#29 Waves

See the Pen CSS Pattern by Preet Kakkar (@preetkakkar) on CodePen.

#30 Grey Card

See the Pen CSS background pattern #1 by Snapstromegon (@Snapstromegon) on CodePen.

Note: All forms are all published on codepen.io and not by me.

Not enough yet? Then this could be something for you: