40 CSS Background Patterns
Collection of hand-picked HTML and CSS background pattern code examples. Update of May 2018 collection. 3 new items.
- CSS Animated Backgrounds
- jQuery Background Plugins
Author
- Ana Tudor
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: -
About the code
Background Patterns
Grid, flex, and background patterns.
Demo Image: CSS Fruit Background - Pineapple
CSS Fruit Background - Pineapple
Made by Angela Velasquez
April 18, 2017
Author
- Chris Johnson
About the code
SVG And CSS Squiggly Pattern
A neat little wave pattern with SVG and CSS.
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
CSS3 Gradient Pattern
Made by fox_hover
September 6, 2016
Demo Image: Underwater CSS Pattern
Underwater CSS Pattern
Made by Laura Sage
August 12, 2016
Author
- ampersand_xyz
About the code
CSS Lattice Pattern
Pure CSS lattice background pattern.
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
CSS Background Patterns - Boxes
Made by Praveen Puglia
May 23, 2016
Demo Image: 6 Stop Shirt Pattern
6 Stop Shirt Pattern
Made by Ana Tudor
May 18, 2016
Author
- Mark Deutsch
About the code
Basket Weave Pattern
CSS pattern: basket weave.
Demo Image: Simple Pattern
Simple Pattern
Made by Gabriel R
October 27, 2015
Author
- Praveen Puglia
About the code
CSS Pattern
CSS modern bricks pattern.
Demo Image: Silver Scale Pattern
Silver Scale Pattern
Made by yoksel
October 17, 2015
Demo Image: Circles Pattern
Circles Pattern
Made by yoksel
October 17, 2015
Demo Image: Waves Pattern
Waves Pattern
Made by yoksel
October 17, 2015
Demo Image: Drops Pattern
Drops Pattern
Made by yoksel
October 17, 2015
Demo Image: Hearts Pattern
Hearts Pattern
Made by yoksel
October 17, 2015
Demo Image: Circles And Dottes Pattern
Circles And Dottes Pattern
Made by yoksel
October 17, 2015
Demo Image: Corners Pattern
Corners Pattern
Made by yoksel
October 17, 2015
Demo Image: Squares Pattern
Squares Pattern
Made by yoksel
October 17, 2015
Demo Image: Corners Pattern
Corners Pattern
Made by yoksel
October 17, 2015
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
Jason Quote Bg Pattern
Made by George Olaru
August 25, 2015
Author
- Katy DeCorah
About the code
Handkerchief Pattern
CSS handkerchief pattern.
Author
- Amelia Bellamy-Royds
About the code
Hexagons Pattern
Animated neon hexagons pattern with SVG and CSS.
Demo Image: CSS Pattern
CSS Pattern
Made by Ee Venn Soh
November 2, 2014
Author
- Gino Farías
About the code
Pattern CSS3
Simple pattern in HTML and CSS.
Demo Image: CSS Pattern With CSS Blend Mode
CSS Pattern With CSS Blend Mode
Made by marinda
June 23, 2014
Demo Image: Striped Background
Striped Background
Made by yoksel
June 12, 2014
Demo Image: Frosty Spirals Pattern
Frosty Spirals Pattern
Made by yoksel
February 11, 2014
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
Tablecloth Pattern
Made by yoksel
February 6, 2014
Demo Image: Diamonds Pattern
Diamonds Pattern
Made by yoksel
February 6, 2014
Demo Image: Diagonal Stripes
Diagonal Stripes
Made by yoksel
February 6, 2014
Author
- Jorge Epuña
About the code
Simple Pattern
Gradients, shapes, rgba...
Demo Image: Multiple Gradients For Fancy Patterns
Multiple Gradients For Fancy Patterns
Made by Mark Lee
November 30, 2013
Demo Image: Blueprint Pattern (CSS3)
Blueprint Pattern (CSS3)
Pure CSS blueprint pattern using CSS3 linear-gradients.
Made by Dean
November 23, 2013
Author
- Chris Coyier
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: -