28 CSS Background Patterns

August 8, 2017 | by Vladimir Stepura

Collection of hand-picked only CSS background patterns. Demo and code.

Demo Image: CSS Fruit Background - Pineapple
Demo Image: CSS Fruit Background - Pineapple

CSS Fruit Background - Pineapple

Made by Angela Velasquez
April 18, 2017

Demo Image: CSS Dot Pattern/Grid Background
Demo Image: CSS Dot Pattern/Grid Background

CSS Dot Pattern/Grid Background

Simple technique to create a dot pattern or dot grid background. Support: all modern browsers and IE9+.
Made by Edmundo Santos
November 2, 2016

Demo Image: CSS3 Gradient Pattern
Demo Image: CSS3 Gradient Pattern

CSS3 Gradient Pattern

Made by fox_hover
September 6, 2016

Demo Image: Underwater CSS Pattern
Demo Image: Underwater CSS Pattern

Underwater CSS Pattern

Made by Laura Sage
August 12, 2016

Demo Image: CSS Background Patterns - Boxes
Demo Image: CSS Background Patterns - Boxes

CSS Background Patterns - Boxes

Made by Praveen Puglia
May 23, 2016

Demo Image: 6 Stop Shirt Pattern
Demo Image: 6 Stop Shirt Pattern

6 Stop Shirt Pattern

Made by Ana Tudor
May 18, 2016

Demo Image: Simple Pattern
Demo Image: Simple Pattern

Simple Pattern

Made by Gabriel R
October 27, 2015

Demo Image: Silver Scale Pattern
Demo Image: Silver Scale Pattern

Silver Scale Pattern

Made by yoksel
October 17, 2015

Demo Image: Circles Pattern
Demo Image: Circles Pattern

Circles Pattern

Made by yoksel
October 17, 2015

Demo Image: Waves Pattern
Demo Image: Waves Pattern

Waves Pattern

Made by yoksel
October 17, 2015

Demo Image: Drops Pattern
Demo Image: Drops Pattern

Drops Pattern

Made by yoksel
October 17, 2015

Demo Image: Hearts Pattern
Demo Image: Hearts Pattern

Hearts Pattern

Made by yoksel
October 17, 2015

Demo Image: Circles And Dottes Pattern
Demo Image: Circles And Dottes Pattern

Circles And Dottes Pattern

Made by yoksel
October 17, 2015

Demo Image: Corners Pattern
Demo Image: Corners Pattern

Corners Pattern

Made by yoksel
October 17, 2015

Demo Image: Squares Pattern
Demo Image: Squares Pattern

Squares Pattern

Made by yoksel
October 17, 2015

Demo Image: Corners Pattern
Demo Image: Corners Pattern

Corners Pattern

Made by yoksel
October 17, 2015

Demo Image: Argyle Pattern
Demo Image: Argyle Pattern

Argyle Pattern

Attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients).
Made by carpe numidium
October 1, 2015

Demo Image: Jason Quote Bg Pattern
Demo Image: Jason Quote Bg Pattern

Jason Quote Bg Pattern

Made by George Olaru
August 25, 2015

Demo Image: CSS Pattern
Demo Image: CSS Pattern

CSS Pattern

Made by Ee Venn Soh
November 2, 2014

Demo Image: CSS Pattern With CSS Blend Mode
Demo Image: CSS Pattern With CSS Blend Mode

CSS Pattern With CSS Blend Mode

Made by marinda
June 23, 2014

Demo Image: Striped Background
Demo Image: Striped Background

Striped Background

Made by yoksel
June 12, 2014

Demo Image: Frosty Spirals Pattern
Demo Image: Frosty Spirals Pattern

Frosty Spirals Pattern

Made by yoksel
February 11, 2014

Demo Image: CSS Pattern
Demo Image: CSS Pattern

CSS Pattern

CSS only. Too complicated to be used in real code.
Made by yoksel
February 10, 2014

Demo Image: Tablecloth Pattern
Demo Image: Tablecloth Pattern

Tablecloth Pattern

Made by yoksel
February 6, 2014

Demo Image: Diamonds Pattern
Demo Image: Diamonds Pattern

Diamonds Pattern

Made by yoksel
February 6, 2014

Demo Image: Diagonal Stripes
Demo Image: Diagonal Stripes

Diagonal Stripes

Made by yoksel
February 6, 2014

Demo Image: Multiple Gradients For Fancy Patterns
Demo Image: Multiple Gradients For Fancy Patterns

Multiple Gradients For Fancy Patterns

Made by Mark Lee
November 30, 2013

Demo Image: Blueprint Pattern (CSS3)
Demo Image: Blueprint Pattern (CSS3)

Blueprint Pattern (CSS3)

Pure CSS blueprint pattern using CSS3 linear-gradients.
Made by Dean
November 23, 2013

FreeFrontend © 2016 - 2017

Back to top