Collection of hand-picked HTML and CSS background pattern code examples. Update of February 2020 collection. 13 new items.
Related Articles
- CSS Animated Backgrounds
- CSS Fixed Backgrounds
- CSS Particle Backgrounds
- CSS Triangle Backgrounds
- jQuery Background Plugins
Links
Made with
- HTML / CSS (SCSS)
About a code
Windows 95 Background in CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Background Patterns
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Nezuko Kamado
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Background Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Background Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Background Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Simple CSS Gradient Patterns
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Patterns and Gradients
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Only CSS: Border Caterpillar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
One Div Pie Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Background Patterns in CSS Using pattern.css
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: pattern.css
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Box Shadow Patterns
Each pattern is created using a single div. Each square or circle is a shadow of a pseudo element.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Texture
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Cards With Simple Stripe Backgrounds
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Halftone Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Flanel Lines
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Untitled
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Stylus)
About a code
CSS Single DIV Geometric Pattern
A rainbow, geometric repeating background for your favorite HTML element.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
1 Element Card Background Patterns
Pure CSS, simple and compact method, no SVG, no images other than CSS gradients.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Slim) / CSS (SCSS)
About a code
Arrow Background Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Background Pattern
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: css-doodle.js
Links
Made with
- HTML / CSS (SCSS)
About a code
Blue Squares
Just a simple page with a CSS gradient background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Simple Patterns
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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: -
Links
Made with
- HTML / CSS
About a code
100 CSS Patterns
Collection of 100 pure CSS background patterns.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS/SCSS
About the code
Background Patterns
Grid, flex, and background patterns.
CSS Fruit Background - Pineapple
Made by Angela Velasquez
April 18, 2017
Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
SVG And CSS Squiggly Pattern
A neat little wave pattern with SVG and CSS.
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
CSS3 Gradient Pattern
Made by fox_hover
September 6, 2016
Underwater CSS Pattern
Made by Laura Sage
August 12, 2016
Links
Made with
- HTML/Pug
- CSS/Sass
About the code
CSS Lattice Pattern
Pure CSS lattice background pattern.
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
CSS Background Patterns - Boxes
Made by Praveen Puglia
May 23, 2016
6 Stop Shirt Pattern
Made by Ana Tudor
May 18, 2016
Links
Made with
- CSS/Less
About the code
Basket Weave Pattern
CSS pattern: basket weave.
Simple Pattern
Made by Gabriel R
October 27, 2015
Links
Made with
- HTML
- CSS
About the code
CSS Pattern
CSS modern bricks pattern.
Silver Scale Pattern
Made by yoksel
October 17, 2015
Circles Pattern
Made by yoksel
October 17, 2015
Waves Pattern
Made by yoksel
October 17, 2015
Drops Pattern
Made by yoksel
October 17, 2015
Hearts Pattern
Made by yoksel
October 17, 2015
Circles And Dottes Pattern
Made by yoksel
October 17, 2015
Corners Pattern
Made by yoksel
October 17, 2015
Squares Pattern
Made by yoksel
October 17, 2015
Corners Pattern
Made by yoksel
October 17, 2015
Argyle Pattern
Attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients).
Made by carpe numidium
October 1, 2015
Jason Quote Bg Pattern
Made by George Olaru
August 25, 2015
Links
Made with
- HTML/Haml
- CSS/SCSS
About the code
Handkerchief Pattern
CSS handkerchief pattern.
Links
Made with
- HTML
- CSS
About the code
Hexagons Pattern
Animated neon hexagons pattern with SVG and CSS.
CSS Pattern
Made by Ee Venn Soh
November 2, 2014
Links
Made with
- HTML/Haml
- CSS/Less
About the code
Pattern CSS3
Simple pattern in HTML and CSS.
CSS Pattern With CSS Blend Mode
Made by marinda
June 23, 2014
Striped Background
Made by yoksel
June 12, 2014
Frosty Spirals Pattern
Made by yoksel
February 11, 2014
CSS Pattern
CSS only. Too complicated to be used in real code.
Made by yoksel
February 10, 2014
Tablecloth Pattern
Made by yoksel
February 6, 2014
Diamonds Pattern
Made by yoksel
February 6, 2014
Diagonal Stripes
Made by yoksel
February 6, 2014
Links
Made with
- HTML/Haml
- CSS/Less
About the code
Simple Pattern
Gradients, shapes, rgba...
Multiple Gradients For Fancy Patterns
Made by Mark Lee
November 30, 2013
Blueprint Pattern (CSS3)
Pure CSS blueprint pattern using CSS3 linear-gradients.
Made by Dean
November 23, 2013
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: -