Collection of hand-picked HTML and CSS background pattern code examples. Update of February 2019 collection. 11 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: Texture

Author

  • Miriam

Made with

  • HTML / CSS

About a code

Texture

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

Responsive: yes

Dependencies: -

Demo image: Cards With Simple Stripe Backgrounds

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Cards With Simple Stripe Backgrounds

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS Halftone Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Halftone Pattern

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

Responsive: yes

Dependencies: -

Demo image: Flanel Lines

Author

  • Travis

Made with

  • HTML / CSS

About a code

Flanel Lines

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

Responsive: yes

Dependencies: -

Demo image: Untitled

Author

  • Bennett Feely

Made with

  • HTML / CSS (SCSS)

About a code

Untitled

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Single DIV Geometric Pattern

Author

  • Lynn Fisher

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: -

Demo image: 1 Element Card Background Patterns

Author

  • Ana Tudor

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: -

Demo image: Arrow Background Pattern

Author

  • CodeMeNatalie

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Arrow Background Pattern

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

Responsive: yes

Dependencies: -

Author

  • eZ UI Design

Made with

  • HTML / CSS (SCSS)

About a code

Background Pattern

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: css-doodle.js

Demo image: Blue Squares

Author

  • Michael van den Berg

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: -

Demo image: Simple Patterns

Author

  • Carlita Centeno

Made with

  • HTML / CSS (SCSS)

About a code

Simple Patterns

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

Responsive: no

Dependencies: -

Demo image: 1 Element Card Background Patterns

Author

  • Ana Tudor

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: CSS Patterns

Author

  • Sandra Davis

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: -

Demo image: Background Patterns

Author

  • Liam

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

Demo image: SVG And CSS Squiggly Pattern

Author

  • Chris Johnson

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

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 Lattice Pattern

Author

  • ampersand_xyz

Made with

  • HTML/Pug
  • CSS/Sass

About the code

CSS Lattice Pattern

Pure CSS lattice background pattern.

Author

  • joshuar

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

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: Basket Weave Pattern

Author

  • Mark Deutsch

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

Demo image: CSS Pattern

Author

  • Praveen Puglia

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

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: Handkerchief Pattern

Author

  • Katy DeCorah

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Handkerchief Pattern

CSS handkerchief pattern.

Demo image: Hexagons Pattern

Author

  • Amelia Bellamy-Royds

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

Demo image: Pattern CSS3

Author

  • Gino Farías

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

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: Simple Pattern

Author

  • Jorge Epuña

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

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

Demo image: Background Triangle Pattern

Author

  • Chris Coyier

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: -