65+ Awesome CSS Background Patterns (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS background pattern code examples. These patterns will look awesome in your site's background.
1. Green CSS Background Pattern
Author: CodeMeNatalie (CodeMeNatalie)
Links: Source Code / Demo
Created on: September 28, 2019
Made with: Slim, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: cpc-arrows, codepenchallenge, pattern, pure-css, forest
2. Blue Squares
Just a simple page with a blue squares gradient background and some minor page filling.
Author: Michael van den Berg (MichaelVanDenBerg)
Links: Source Code / Demo
Created on: September 8, 2019
Made with: HTML, SCSS
Tags: blue, gradient, background, squares
3. Grid, Flex, And Background Patterns
Grid, flex & background patterns
Author: Liam (liamj)
Links: Source Code / Demo
Created on: September 7, 2017
Made with: HTML, SCSS, JS
Tags: grid, flex, gradient, pattern, scandinavian
4. Cards With Simple Stripe Backgrounds
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 10, 2020
Made with: HTML, SCSS
Tags: gradient
5. CSS Background Texture
Author: Miriam (karaWhiteDragon)
Links: Source Code / Demo
Created on: February 11, 2020
Made with: HTML, CSS
Tags: cpc-texture, codepenchallenge
6. Flanel Lines
Author: Travis (tvalerius)
Links: Source Code / Demo
Created on: February 3, 2020
Made with: HTML, CSS
Tags: cpc-lines, codepenchallenge
7. Pure CSS Halftone Pattern (1 Element)
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 8, 2020
Made with: HTML, SCSS
8. CSS Single Div Geometric Pattern
A rainbow, geometric repeating background for your favorite HTML element.
Author: Lynn Fisher (lynnandtonic)
Links: Source Code / Demo
Created on: October 11, 2019
Made with: Stylus
Tags: css, background, repeating, pattern, rainbow
9. CSS Background Rainbow
Author: Bennett Feely (bennettfeely)
Links: Source Code / Demo
Created on: January 30, 2020
Made with: SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
10. Background Pattern
Author: eZ UI Design (eZ_UI)
Links: Source Code / Demo
Created on: September 24, 2019
Made with: HTML, SCSS
Tags: cpc-b-w-a, codepenchallenge, pattern.background
11. 1 Element Card Background Patterns (see Description)
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.
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: October 11, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: mask, css-variables, cpc-orange-blue, calc
12. 1 Element Card Patterns (Chrome Only)
Fully functional only if conic-gradient() has native support (so Chrome only). Dedicated to the memory of someone special who passed away this January.
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: January 31, 2019
Made with: HTML, SCSS
Tags: cpc-purple, mask, gradient, conic-gradient
13. Dots Challenge
Author: Carlita Centeno (carlita712)
Links: Source Code / Demo
Created on: August 19, 2019
Made with: HTML, SCSS
Tags: cpc-100-dots, codepenchallenge
14. (SVG+CSS) Squiggly Pattern
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.
Author: Chris Johnson (jhnsnc)
Links: Source Code / Demo
Created on: December 15, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: svg, css, animation, pattern
15. Many CSS Patterns
Author: Sandra Davis (lunamatic)
Links: Source Code / Demo
Created on: July 13, 2018
Made with: HTML, CSS
16. CSS Backgrounds
Playing around with gradients, mostly
Author: joshuar (joshuar)
Links: Source Code / Demo
Created on: May 29, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-background, backgrounds, css-art
17. CSS Lattice Pattern
Author: ampersand_xyz (ampersand_xyz)
Links: Source Code / Demo
Created on: July 8, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
18. CSS Pattern: Basket Weave
Author: Mark Deutsch (doytch)
Links: Source Code / Demo
Created on: March 28, 2016
Made with: Less
19. Handkerchief Pattern
Author: Katy DeCorah (katydecorah)
Links: Source Code / Demo
Created on: August 2, 2015
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: retrotilesweekend
20. CSS Pattern Play
Modern Bricks!
Author: Praveen Puglia (praveenpuglia)
Links: Source Code / Demo
Created on: October 18, 2015
Made with: CSS
Tags: gradient, pattern, background
21. Neon Hexagons Pattern
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
Author: Amelia Bellamy-Royds (AmeliaBR)
Links: Source Code / Demo
Created on: July 25, 2015
Made with: HTML, CSS
Tags: neonhexagonsweekend, svg, pattern, filter, animation
22. Pattern CSS3
Author: Gino Farías (ginirsss)
Links: Source Code / Demo
Created on: October 2, 2014
Made with: Haml, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: pattern, background, seudoclass, css3
23. Crappy Recreation Of The Book Cover Of *The Flame Alphabet*
See the book here.
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: February 28, 2013
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: book-cover, flame, pattern
24. Simple Pattern With CSS3
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
Author: Jorge Epuñan (juanbrujo)
Created on: January 13, 2014
Made with: Haml, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css3, rgba, haml
25. CSS Fruit Background - Pineapple
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.
Author: Angela Velasquez (AngelaVelasquez)
Links: Source Code / Demo
Created on: December 8, 2016
Made with: SCSS
Tags: css, css3, background
26. CSS Dot Pattern/grid Background
Simple technique to create a dot pattern or dot grid background. Support: all modern browsers and IE9+
Author: Edmundo Santos (edmundojr)
Links: Source Code / Demo
Created on: July 19, 2016
Made with: HTML, SCSS
Tags: css, pattern, background, dot, grid
27. CSS3 Gradient Pattern
Author: foxeisen (fox_hover)
Links: Source Code / Demo
Created on: September 6, 2016
Made with: CSS
Tags: css, css3, css-gradient
28. Underwater Css Pattern
Author: Laura Sage (ThePixelPixie)
Links: Source Code / Demo
Created on: August 12, 2016
Made with: HTML, CSS
29. CSS Background Patterns - Boxes
Author: Praveen Puglia (praveenpuglia)
Links: Source Code / Demo
Created on: May 23, 2016
Made with: HTML, CSS
30. 6 Stop Shirt Pattern
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
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: May 8, 2016
Made with: SCSS
Tags: gradient, linear-gradient, sass
31. Simple Pattern
Pattern for header
Author: Gabriel R (byrass)
Links: Source Code / Demo
Created on: October 15, 2015
Made with: CSS
Tags: pattern
32. Silver Scale
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 13, 2014
Made with: SCSS
Tags: css, gradients, scale
33. Circles
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: CSS
Tags: gradients, css, circles
34. Waves
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: HTML, SCSS
Tags: css, waves, gradients
35. Drops
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: HTML, SCSS
Tags: css, drops, gradients
36. Hearts
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: HTML, SCSS
Tags: css, hearts, gradients
37. Circles And Dottes
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: HTML, SCSS
Tags: css, gradients, dottes, circles
38. Corners
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: HTML, SCSS
Tags: css, gradients, squares
39. Squares
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 7, 2014
Made with: HTML, SCSS
Tags: css, gradients, squares
40. Corners
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 6, 2014
Made with: HTML, SCSS
Tags: css, gradients, corners
41. Argyle Pattern
attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients). my math is top notch stuff ['-____-]
Author: carpe numidium (carpenumidium)
Links: Source Code / Demo
Created on: October 1, 2015
Made with: CSS, JS
Tags: css-pattern, pattern, background-image, gradients
42. Jason Quote Bg Pattern
A background pattern for a Quote widget. Based on Lea Verou snippets.
Author: George Olaru (babbardel)
Links: Source Code / Demo
Created on: August 20, 2015
Made with: SCSS
Tags: css3, pattern, cubes, 3d
43. Underwater Css Pattern
Author: Laura Sage (ThePixelPixie)
Links: Source Code / Demo
Created on: August 12, 2016
Made with: HTML, CSS
44. CSS Pattern With CSS Blend Mode
Sass pattern mixin with CSS background-blend-mode
Author: marinda (marinda-s)
Links: Source Code / Demo
Created on: June 23, 2014
Made with: SCSS
Tags: css-pattern, css background-blend-mode, sass
45. Striped Background
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 6, 2014
Made with: HTML, CSS
Tags: css, gradients, stripes
46. Frosty Spirals
I can't believe that we can get it with gradients! Clean CSS.
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 11, 2014
Made with: SCSS
Tags: css, spirals, gradients, patterns
47. Css Pattern
Css only. Too complicated to be used in real code : )
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 10, 2014
Made with: SCSS
Tags: css, gradients, patterns
48. Tablecloth
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 6, 2014
Made with: HTML, SCSS
Tags: css, gradients, squares, lines
49. Diamonds
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 6, 2014
Made with: HTML, SCSS
Tags: css, corners, gradients
50. Diagonal Stripes
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: February 6, 2014
Made with: HTML, SCSS
Tags: css, gradients, lines
51. Multiple Gradients For Fancy Patterns
Author: Mark Lee (leemark)
Links: Source Code / Demo
Created on: November 29, 2013
Made with: HTML, CSS
Tags: css, gradient, background, pattern
52. Blueprint Pattern (CSS3)
pure CSS blueprint pattern using CSS3 linear-gradients
Author: Dean (tennowman)
Links: Source Code / Demo
Created on: November 23, 2013
Made with: CSS
Tags: css3, pattern, gradient, pure-css
53. Background Pattern
Author: yuanchuan (yuanchuan)
Links: Source Code / Demo
Created on: January 31, 2017
Made with: HTML, CSS, JS
54. Endless Autoscrolling Background Pattern
Author: Nils Riedemann (riedemann)
Links: Source Code / Demo
Created on: February 8, 2017
Made with: HTML, SCSS
55. Background Patterns
Author: Pei (fantaghiro)
Links: Source Code / Demo
Created on: June 19, 2014
Made with: HTML, CSS
Tags: css, background, pattern
56. Background Pattern Animation
Author: ichimonzi (ichimonzi)
Links: Source Code / Demo
Created on: August 7, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
57. CSS Background Pattern
Tried to make this http://imgur.com/etTzJp8 pattern and failed spectacularly.
Author: carpe numidium (carpenumidium)
Links: Source Code / Demo
Created on: September 25, 2015
Made with: SCSS
Tags: css-gradients
58. CSS Secrets - Complex Background Patterns
CSS Secrets - Complex background patterns
Author: Vijaya Kumar Vulchi (vulchivijay)
Links: Source Code / Demo
Created on: April 11, 2016
Made with: HTML, CSS
Tags: css secrets - complex background patterns
59. SVG Background Pattern
Author: Dove Romero (doveromero)
Links: Source Code / Demo
Created on: November 2, 2016
Made with: HTML, SCSS, JS
60. CSS Patterns
Author: Wally (CWEI)
Links: Source Code / Demo
Created on: August 11, 2016
Made with: HTML, SCSS
61. CSS Patterns
Author: Fabien (InnerGraffiks)
Links: Source Code / Demo
Created on: July 7, 2016
Made with: HTML, CSS
62. CSS Pattern
Author: Justyna J (justynaj)
Links: Source Code / Demo
Created on: February 9, 2017
Made with: CSS
More Awesome Lists:
Share: