Post thumbnail: 40 CSS Background Patterns

40 CSS Background Patterns

Collection of hand-picked HTML and CSS background pattern code examples. Update of May 2018 collection. 3 new items.

Related Articles

  1. CSS Animated Backgrounds
  2. CSS Fixed Backgrounds
  3. CSS Particle Backgrounds
  4. CSS Triangle Backgrounds
  5. jQuery Background Plugins

Demo image: 1 Element Card Background Patterns

Author

  • Ana Tudor

Links

Made with

  • HTML / CSS (SCSS)

About the code

1 Element Card Background Patterns

Fully functional only if conic-gradient() has native support.

Compatible browsers: Chrome, Firefox (partial), Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Background Patterns

Author

  • Liam

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Background Patterns

Grid, flex, and background patterns.

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

CSS Fruit Background - Pineapple

Made by Angela Velasquez
April 18, 2017

download demo and code

Demo image: SVG And CSS Squiggly Pattern

Author

  • Chris Johnson

Links

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

SVG And CSS Squiggly Pattern

A neat little wave pattern with SVG and CSS.

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

download demo and code

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

CSS3 Gradient Pattern

Made by fox_hover
September 6, 2016

download demo and code

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

Underwater CSS Pattern

Made by Laura Sage
August 12, 2016

download demo and code

Demo image: CSS Lattice Pattern

Author

  • ampersand_xyz

Links

Made with

  • HTML/Pug
  • CSS/Sass

About the code

CSS Lattice Pattern

Pure CSS lattice background pattern.

Author

  • joshuar

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the code

CSS Backgrounds

Playing around with gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

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

CSS Background Patterns - Boxes

Made by Praveen Puglia
May 23, 2016

download demo and code

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

6 Stop Shirt Pattern

Made by Ana Tudor
May 18, 2016

download demo and code

Demo image: Basket Weave Pattern

Author

  • Mark Deutsch

Links

Made with

  • CSS/Less

About the code

Basket Weave Pattern

CSS pattern: basket weave.

Demo Image: Simple Pattern
Demo Image: Simple Pattern

Simple Pattern

Made by Gabriel R
October 27, 2015

download demo and code

Demo image: CSS Pattern

Author

  • Praveen Puglia

Links

Made with

  • HTML
  • CSS

About the code

CSS Pattern

CSS modern bricks pattern.

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

Silver Scale Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Circles Pattern
Demo Image: Circles Pattern

Circles Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Waves Pattern
Demo Image: Waves Pattern

Waves Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Drops Pattern
Demo Image: Drops Pattern

Drops Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Hearts Pattern
Demo Image: Hearts Pattern

Hearts Pattern

Made by yoksel
October 17, 2015

download demo and code

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

Circles And Dottes Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Corners Pattern
Demo Image: Corners Pattern

Corners Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Squares Pattern
Demo Image: Squares Pattern

Squares Pattern

Made by yoksel
October 17, 2015

download demo and code

Demo Image: Corners Pattern
Demo Image: Corners Pattern

Corners Pattern

Made by yoksel
October 17, 2015

download demo and code

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

download demo and code

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

Jason Quote Bg Pattern

Made by George Olaru
August 25, 2015

download demo and code

Demo image: Handkerchief Pattern

Author

  • Katy DeCorah

Links

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Handkerchief Pattern

CSS handkerchief pattern.

Demo image: Hexagons Pattern

Author

  • Amelia Bellamy-Royds

Links

Made with

  • HTML
  • CSS

About the code

Hexagons Pattern

Animated neon hexagons pattern with SVG and CSS.

Demo Image: CSS Pattern
Demo Image: CSS Pattern

CSS Pattern

Made by Ee Venn Soh
November 2, 2014

download demo and code

Demo image: Pattern CSS3

Author

  • Gino Farías

Links

Made with

  • HTML/Haml
  • CSS/Less

About the code

Pattern CSS3

Simple pattern in HTML and CSS.

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

download demo and code

Demo Image: Striped Background
Demo Image: Striped Background

Striped Background

Made by yoksel
June 12, 2014

download demo and code

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

Frosty Spirals Pattern

Made by yoksel
February 11, 2014

download demo and code

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

download demo and code

Demo Image: Tablecloth Pattern
Demo Image: Tablecloth Pattern

Tablecloth Pattern

Made by yoksel
February 6, 2014

download demo and code

Demo Image: Diamonds Pattern
Demo Image: Diamonds Pattern

Diamonds Pattern

Made by yoksel
February 6, 2014

download demo and code

Demo Image: Diagonal Stripes
Demo Image: Diagonal Stripes

Diagonal Stripes

Made by yoksel
February 6, 2014

download demo and code

Demo image: Simple Pattern

Author

  • Jorge Epuña

Links

Made with

  • HTML/Haml
  • CSS/Less

About the code

Simple Pattern

Gradients, shapes, rgba...

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

download demo and code

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

download demo and code

Demo image: Background Triangle Pattern

Author

  • Chris Coyier

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Background Triangle Pattern

Crappy recreation of the book cover of "The Flame Alphabet".

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

back to top