Collection of hand-picked free HTML and CSS background pattern code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 106 new items.
Related Articles
- CSS Animated Backgrounds
- CSS Fixed Backgrounds
- CSS Particle Backgrounds
- CSS Triangle Backgrounds
- jQuery Background Plugins

Links
Made with
- HTML / CSS
About a code
CSS Only Circular Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Lighted Cubes Tessellated Pattern - Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Cubes on Hexagonal Grid Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Rhombus vs Octagon Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Another CSS pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Christmas CSS Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
An Hypnotic CSS Only Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Chimneys Field Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Rotated Square Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Citrus CSS Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Pattern: Rhombic
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Another CSS Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Circular Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Diagonal Wavy Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Pattern: Connectors
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Xmassy Patterns
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Hypnotic Pattern Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Pattern: Tablets
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Cropped Golden Cubes Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
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
Pure CSS Braid Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
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
Pure CSS Mosaic Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Quarter a Circle Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Geometric Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Simple Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Dashed Polka Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Simple Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Dark Mode Mastodon Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Triangular Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Square Inside Circle Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Rhombus Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Generative Art
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Generative Art
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
Halftone Background with Blend Modes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Rotated Square Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Circles Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Embedded Squares Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Radial Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Braided Lines Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Woven Lines Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Strange Zig-Zag Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Square Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Hexagon Blocks Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Pyramids Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Cubic Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Puzzle Pieces Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Pattern. Rectangles vs Squares
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Blocks & Columns Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Star Holed Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Wedge Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Studded Rubber Flooring Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Neuromorphic Circles Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Candy Rainbow Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Fish Scales Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Overlapping Circles Field Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Honeycomb Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Buttons Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Cube Holes in Cubes Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Slanted Squares Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (PostCSS)
About a code
CSS Ripples with Masks and Custom Properties
Basic example about how to make ripples and dot grids with CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Sloped Tiles Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Brick Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (Less)
About a code
Pentagon
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (Less)
About a code
Cubic Tessellation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Tessellation Experiment #2. Abstract
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Simplifying CSS Patterns
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
1 div, Pure CSS Halftone Dash Dot Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pure CSS Villa Bagatelle Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Wooden Basket Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Only Rectangular Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Overlook Hotel Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Bone Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Blended Layer Backgrounds #2
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Tessellation Experiment #3. Optical Illusion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Hexagonal Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Blocks Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Y Tessellated Pattern. No Div. Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Tessellation Experiment #4. Puzzle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Tessellation Experiment #1. Square
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Cube Pattern < 200 Bytes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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
About a code
Pure CSS Ulf Moritz Signature Wallpaper
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 / CSS
About a code
Plaid background
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 (SCSS)
About a code
Simple conic-gradient() Pattern
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 (SCSS)
About a code
Simple Pure CSS Café Wall Illusion
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: yes
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
Subtle Gradient Pattern Background
An understated background pattern design created with very little code - just 2 CSS rules.
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
background-patterns
Compatible browsers: Chrome, Edge, Firefox, 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.

Links
Made with
- HTML / CSS
About a code
Some Patterns
These are some ideas for background patterns, made with linear and radial gradients.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Playing with background-blend-mode
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

CSS Fruit Background - Pineapple
Made by Angela Velasquez
April 18, 2017

Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Heart Polka-dot Background Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
SVG And CSS Squiggly Pattern
A neat little wave pattern with SVG and CSS.

Links
Made with
- HTML / CSS
About a code
Children in Need CSS Background Pattern
A background pattern for BBC Children in Need, UK charity event to help children's charities.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Links
Made with
- HTML / CSS (SCSS)
About a code
repeating-linear-gradient background-image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

CSS3 Gradient Pattern
Made by fox_hover
September 6, 2016

Links
Made with
- HTML / CSS
About a code
Underwater CSS Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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.

Links
Made with
- HTML / CSS (SCSS)
About a code
The Cicada background + background-blend-modes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Background Blend Mode Sample
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

CSS Pattern With CSS Blend Mode
Made by marinda
June 23, 2014

Striped Background
Made by yoksel
June 12, 2014

Links
Made with
- HTML / CSS (SCSS)
About a code
Colored Paper
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Links
Made with
- HTML / CSS
About a code
CSS Background Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -