169 CSS Background Patterns

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.

Author

Temani Afif
January 15, 2023

Made with

HTML / CSS

About a code

CSS Only Circular Pattern

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

Responsive: yes

Dependencies: -

Demo image: 3D Lighted Cubes Tessellated Pattern - Pure CSS

Author

Josetxu
January 2, 2023

Made with

HTML / CSS

About a code

3D Lighted Cubes Tessellated Pattern - Pure CSS

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

Responsive: yes

Dependencies: -

Demo image: 3D Cubes on Hexagonal Grid Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 23, 2022

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

Author

Temani Afif
December 18, 2022

Made with

HTML / CSS

About a code

Rhombus vs Octagon Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
December 17, 2022

Made with

HTML / CSS

About a code

Another CSS pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
December 13, 2022

Made with

HTML / CSS

About a code

Christmas CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: An Hypnotic CSS Only Pattern

Author

Temani Afif
December 8, 2022

Made with

HTML / CSS

About a code

An Hypnotic CSS Only Pattern

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

Responsive: yes

Dependencies: -

Demo image: 3D Chimneys Field Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 7, 2022

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

Author

Temani Afif
December 5, 2022

Made with

HTML / CSS

About a code

Rotated Square Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
December 4, 2022

Made with

HTML / CSS

About a code

Citrus CSS Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
December 3, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Pattern: Rhombic

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 29, 2022

Made with

HTML / CSS

About a code

Another CSS Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 27, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 27, 2022

Made with

HTML / CSS

About a code

Circular Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 27, 2022

Made with

HTML / CSS

About a code

Diagonal Wavy Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Pattern: Connectors

Author

Ana Tudor
November 24, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Pattern: Connectors

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

Responsive: yes

Dependencies: -

Author

Mark Boots
November 24, 2022

Made with

HTML / CSS

About a code

Xmassy Patterns

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 24, 2022

Made with

HTML / CSS

About a code

Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 22, 2022

Made with

HTML / CSS

About a code

Hypnotic Pattern Animation

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 21, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Pattern: Tablets

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

Responsive: yes

Dependencies: -

Demo image: 3D Cropped Golden Cubes Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
November 21, 2022

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

Author

Ana Tudor
November 21, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 20, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Braid Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 19, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 20, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Mosaic Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 19, 2022

Made with

HTML / CSS

About a code

Quarter a Circle Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 19, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Geometric Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 17, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Simple Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 13, 2022

Made with

HTML / CSS

About a code

Dashed Polka Pattern

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
November 12, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Simple Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 12, 2022

Made with

HTML / CSS

About a code

Dark Mode Mastodon Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 6, 2022

Made with

HTML / CSS

About a code

Triangular Pattern

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

Responsive: yes

Dependencies: -

Demo image: Square Inside Circle Pattern

Author

Temani Afif
November 5, 2022

Made with

HTML / CSS

About a code

Square Inside Circle Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
November 2, 2022

Made with

HTML / CSS

About a code

CSS Only Rhombus Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
October 21, 2022

Made with

HTML / CSS

About a code

Generative Art

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

Responsive: yes

Dependencies: -

Author

Temani Afif
October 21, 2022

Made with

HTML / CSS

About a code

Generative Art

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

Responsive: yes

Dependencies: -

Author

Temani Afif
October 20, 2022

Made with

HTML / CSS

About a code

Background Pattern

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

Responsive: yes

Dependencies: -

Demo image: Halftone Background with Blend Modes

Author

Michelle Barker
October 4, 2022

Made with

HTML / CSS

About a code

Halftone Background with Blend Modes

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

Responsive: yes

Dependencies: -

Demo image: CSS Only Rotated Square Pattern

Author

Temani Afif
September 17, 2022

Made with

HTML / CSS

About a code

CSS Only Rotated Square Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
September 17, 2022

Made with

HTML / CSS

About a code

CSS Only Circles Pattern

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

Responsive: yes

Dependencies: -

Demo image: Embedded Squares Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
September 2, 2022

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

Author

Temani Afif
August 27, 2022

Made with

HTML / CSS

About a code

CSS Only Radial Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
August 20, 2022

Made with

HTML / CSS

About a code

CSS Braided Lines Pattern

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

Responsive: yes

Dependencies: -

Demo image: Woven Lines Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
August 16, 2022

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

Author

Temani Afif
August 13, 2022

Made with

HTML / CSS

About a code

Strange Zig-Zag Pattern

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

Responsive: yes

Dependencies: -

Author

Temani Afif
August 12, 2022

Made with

HTML / CSS

About a code

CSS Only Square Pattern

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

Responsive: yes

Dependencies: -

Demo image: 3D Hexagon Blocks Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
August 12, 2022

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

Demo image: 3D Pyramids Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
July 24, 2022

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

Author

Temani Afif
July 24, 2022

Made with

HTML / CSS

About a code

CSS Only Cubic Pattern

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

Responsive: yes

Dependencies: -

Demo image: Puzzle Pieces Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
July 24, 2022

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

Author

Temani Afif
July 15, 2022

Made with

HTML / CSS

About a code

CSS Only Pattern

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

Responsive: yes

Dependencies: -

Demo image: CSS Only Pattern. Rectangles vs Squares

Author

Temani Afif
July 10, 2022

Made with

HTML / CSS

About a code

CSS Only Pattern. Rectangles vs Squares

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

Responsive: yes

Dependencies: -

Demo image: 3D Blocks & Columns Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
June 28, 2022

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

Author

yuanchuan
June 20, 2022

Made with

HTML / CSS

About a code

Pattern

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

Responsive: yes

Dependencies: -

Demo image: 3D Star Holed Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
June 20, 2022

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

Demo image: 3D Wedge Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
June 20, 2022

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

Demo image: Studded Rubber Flooring Pattern. No Div. Pure CSS

Author

Josetxu
February 13, 2022

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

Demo image: Neuromorphic Circles Pattern. No Div. Pure CSS

Author

Josetxu
February 13, 2022

Made with

HTML / CSS

About a code

Neuromorphic Circles Pattern. No Div. Pure CSS

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

Responsive: no

Dependencies: -

Demo image: 3D Candy Rainbow Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
February 1, 2022

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

Demo image: Fish Scales Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
January 19, 2022

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

Demo image: Overlapping Circles Field Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
January 19, 2022

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

Demo image: 3D Honeycomb Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 31, 2021

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

Demo image: Buttons Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 27, 2021

Made with

HTML / CSS

About a code

Buttons Tessellated Pattern. No Div. Pure CSS

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

Responsive: no

Dependencies: -

Demo image: 3D Cube Holes in Cubes Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 21, 2021

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

Demo image: Slanted Squares Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 20, 2021

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

Demo image: CSS Ripples with Masks and Custom Properties

Author

Mattia Astorino
December 18, 2021

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

Demo image: 3D Sloped Tiles Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
December 9, 2021

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

Demo image: Brick Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
September 26, 2021

Made with

HTML / CSS

About a code

Brick Tessellated Pattern. No Div. Pure CSS

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

Responsive: yes

Dependencies: -

Author

Olex
July 23, 2021

Made with

HTML / CSS (Less)

About a code

Pentagon

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

Responsive: no

Dependencies: -

Author

Epogee Design
July 20, 2021

Made with

HTML / CSS (Less)

About a code

Cubic Tessellation

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

Responsive: no

Dependencies: -

Demo image: Tessellation Experiment #2. Abstract

Author

Josetxu
July 20, 2021

Made with

HTML / CSS

About a code

Tessellation Experiment #2. Abstract

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

Responsive: no

Dependencies: -

Author

Ana Tudor
July 17, 2021

Made with

HTML / CSS (SCSS)

About a code

Simplifying CSS Patterns

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

Responsive: no

Dependencies: -

Author

ryan
July 12, 2021

Made with

HTML / CSS

About a code

Pattern

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

Responsive: no

Dependencies: -

Demo image: 1 div, Pure CSS Halftone Dash Dot Pattern

Author

Ana Tudor
July 6, 2021

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

Demo image: Pure CSS Villa Bagatelle Pattern

Author

Bence Szabo
June 17, 2021

Made with

HTML / CSS

About a code

Pure CSS Villa Bagatelle Pattern

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

Responsive: yes

Dependencies: -

Demo image: Wooden Basket Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
June 14, 2022

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

Author

yuanchuan
June 12, 2022

Made with

HTML / CSS

About a code

Pattern

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

Responsive: yes

Dependencies: -

Demo image: CSS Only Rectangular Pattern

Author

Temani Afif
June 12, 2022

Made with

HTML / CSS

About a code

CSS Only Rectangular Pattern

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

Responsive: yes

Dependencies: -

Author

Thea
June 4, 2022

Made with

HTML / CSS

About a code

Pattern

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

Responsive: yes

Dependencies: -

Demo image: Overlook Hotel Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
November 20, 2021

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

Demo image: Bone Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
August 30, 2021

Made with

HTML / CSS

About a code

Bone Tessellated Pattern. No Div. Pure CSS

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

Responsive: yes

Dependencies: -

Demo image: Blended Layer Backgrounds #2

Author

Ana Tudor
August 5, 2021

Made with

HTML / CSS (SCSS)

About a code

Blended Layer Backgrounds #2

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

Responsive: no

Dependencies: -

Demo image: Tessellation Experiment #3. Optical Illusion

Author

Josetxu
July 30, 2021

Made with

HTML / CSS

About a code

Tessellation Experiment #3. Optical Illusion

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

Responsive: no

Dependencies: -

Demo image: Hexagonal Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
July 26, 2021

Made with

HTML / CSS

About a code

Hexagonal Tessellated Pattern. No Div. Pure CSS

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

Responsive: no

Dependencies: -

Demo image: 3D Blocks Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
July 25, 2021

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

Demo image: 3D Y Tessellated Pattern. No Div. Pure CSS

Author

Josetxu
July 23, 2021

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

Demo image: Tessellation Experiment #4. Puzzle

Author

Josetxu
July 21, 2021

Made with

HTML / CSS

About a code

Tessellation Experiment #4. Puzzle

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

Responsive: no

Dependencies: -

Demo image: Tessellation Experiment #1. Square

Author

Josetxu
July 20, 2021

Made with

HTML / CSS

About a code

Tessellation Experiment #1. Square

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

Responsive: no

Dependencies: -

Demo image: Pure CSS Cube Pattern < 200 Bytes

Author

Ana Tudor
April 30, 2021

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Cube Pattern < 200 Bytes

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

Responsive: yes

Dependencies: -

Demo image: Windows 95 Background in CSS

Author

Bennett Feely
January 28, 2021

Made with

HTML / CSS (SCSS)

About a code

Windows 95 Background in CSS

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

Responsive: yes

Dependencies: -

Author

yuanchuan
December 22, 2020

Made with

HTML / CSS

About a code

Background Patterns

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

Responsive: yes

Dependencies: -

Author

Yuhomyan
December 4, 2020

Made with

HTML / CSS

About a code

Nezuko Kamado

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

Responsive: yes

Dependencies: -

Author

G V TANISH VETTRIVEL
November 18, 2020

Made with

HTML / CSS

About a code

Background Pattern

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

Responsive: yes

Dependencies: -

Author

G V TANISH VETTRIVEL
November 18, 2020

Made with

HTML / CSS

About a code

Background Pattern

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

Responsive: yes

Dependencies: -

Author

G V TANISH VETTRIVEL
November 18, 2020

Made with

HTML / CSS

About a code

Background Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Ulf Moritz Signature Wallpaper

Author

Bence Szabo
September 1, 2020

Made with

HTML / CSS

About a code

Pure CSS Ulf Moritz Signature Wallpaper

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

Responsive: yes

Dependencies: -

Demo image: Simple CSS Gradient Patterns

Author

Ana Tudor
September 1, 2020

Made with

HTML / CSS (SCSS)

About a code

Simple CSS Gradient Patterns

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

Responsive: yes

Dependencies: -

Author

Inès
August 30, 2020

Made with

HTML / CSS

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Author

Akshaya Venky
August 12, 2020

Made with

HTML / CSS (SCSS)

About a code

Patterns and Gradients

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

Responsive: yes

Dependencies: -

Author

luisanogueira
July 23, 2020

Made with

HTML / CSS

About a code

Plaid background

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

Responsive: yes

Dependencies: -

Demo image: Only CSS: Border Caterpillar

Author

Yusuke Nakaya
June 16, 2020

Made with

HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Border Caterpillar

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

Responsive: yes

Dependencies: -

Author

Olivia Ng
May 20, 2020

Made with

HTML (Pug) / CSS (SCSS)

About a code

One Div Pie Background

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

Responsive: yes

Dependencies: -

Demo image: Simple conic-gradient() Pattern

Author

Ana Tudor
April 23, 2020

Made with

HTML / CSS (SCSS)

About a code

Simple conic-gradient() Pattern

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

Responsive: yes

Dependencies: -

Demo image: Background Patterns in CSS Using pattern.css

Author

Bansal
April 21, 2020

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

Author

Manan Tank
March 31, 2020

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

Demo image: Simple Pure CSS Café Wall Illusion

Author

Ana Tudor
March 26, 2020

Made with

HTML / CSS (SCSS)

About a code

Simple Pure CSS Café Wall Illusion

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

Responsive: yes

Dependencies: -

Author

Miriam
February 11, 2020

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
February 10, 2020

Made with

HTML / CSS (SCSS)

About a code

Cards With Simple Stripe Backgrounds

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Ana Tudor
February 8, 2020

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Halftone Pattern

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

Responsive: yes

Dependencies: -

Author

Travis
February 3, 2020

Made with

HTML / CSS

About a code

Flanel Lines

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

Responsive: yes

Dependencies: -

Author

Bennett Feely
January 31, 2020

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
October 11, 2019

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
October 11, 2019

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

Author

CodeMeNatalie
September 28, 2019

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
September 24, 2019

Made with

HTML / CSS (SCSS)

About a code

Background Pattern

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: css-doodle.js

Author

Michael van den Berg
September 8, 2019

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

Author

Carlita Centeno
August 19, 2019

Made with

HTML / CSS (SCSS)

About a code

Simple Patterns

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
January 31, 2019

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: Subtle Gradient Pattern Background

Author

Chris Smith
January 30, 2019

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

Author

Webstoryboy
December 22, 2018

Made with

HTML / CSS

About a code

background-patterns

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

Responsive: yes

Dependencies: -

Author

Webstoryboy
December 22, 2018

Made with

HTML / CSS

About a code

background-patterns

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

Responsive: yes

Dependencies: -

Author

Sandra Davis
July 13, 2018

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

Author

Liam
September 7, 2017

Made with

HTML
CSS/SCSS

About the code

Background Patterns

Grid, flex, and background patterns.

Author

Elitsa Dimitrova
May 22, 2017

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

Demo image: Playing with background-blend-mode

Author

Amelia Bellamy-Royds
April 21, 2017

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

download demo and code

Demo image: CSS Heart Polka-dot Background Pattern

Author

Brett Peters
February 6, 2017

Made with

HTML / CSS (SCSS)

About a code

CSS Heart Polka-dot Background Pattern

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

Responsive: yes

Dependencies: -

Demo image: SVG And CSS Squiggly Pattern

Author

Chris Johnson
December 15, 2016

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: Children in Need CSS Background Pattern

Author

Chris Smith
November 18, 2016

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

download demo and code

Demo image: repeating-linear-gradient background-image

Author

Zed Dash
September 25, 2016

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

download demo and code

Author

Laura Sage
August 12, 2016

Made with

HTML / CSS

About a code

Underwater CSS Pattern

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

Responsive: yes

Dependencies: -

Author

ampersand_xyz
July 8, 2016

Made with

HTML/Pug
CSS/Sass

About the code

CSS Lattice Pattern

Pure CSS lattice background pattern.

Author

joshuar
May 30, 2016

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

download demo and code

6 Stop Shirt Pattern

Made by Ana Tudor
May 18, 2016

download demo and code

Author

Mark Deutsch
March 28, 2016

Made with

CSS/Less

About the code

Basket Weave Pattern

CSS pattern: basket weave.

Simple Pattern

Made by Gabriel R
October 27, 2015

download demo and code

Author

Praveen Puglia
October 18, 2015

Made with

HTML
CSS

About the code

CSS Pattern

CSS modern bricks pattern.

Silver Scale Pattern

Made by yoksel
October 17, 2015

download demo and code

Circles Pattern

Made by yoksel
October 17, 2015

download demo and code

Waves Pattern

Made by yoksel
October 17, 2015

download demo and code

Drops Pattern

Made by yoksel
October 17, 2015

download demo and code

Hearts Pattern

Made by yoksel
October 17, 2015

download demo and code

Circles And Dottes Pattern

Made by yoksel
October 17, 2015

download demo and code

Corners Pattern

Made by yoksel
October 17, 2015

download demo and code

Squares Pattern

Made by yoksel
October 17, 2015

download demo and code

Corners Pattern

Made by yoksel
October 17, 2015

download demo and code

Argyle Pattern

Attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients).
Made by carpe numidium
October 1, 2015

download demo and code

Jason Quote Bg Pattern

Made by George Olaru
August 25, 2015

download demo and code

Author

Katy DeCorah
August 2, 2015

Made with

HTML/Haml
CSS/SCSS

About the code

Handkerchief Pattern

CSS handkerchief pattern.

Author

Amelia Bellamy-Royds
July 25, 2015

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

download demo and code

Author

Gino Farías
October 2, 2014

Made with

HTML/Haml
CSS/Less

About the code

Pattern CSS3

Simple pattern in HTML and CSS.

Demo image: The Cicada background + background-blend-modes

Author

yoksel
June 13, 2014

Made with

HTML / CSS (SCSS)

About a code

The Cicada background + background-blend-modes

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

Responsive: no

Dependencies: -

Demo image: Background Blend Mode Sample

Author

Nelson
June 25, 2014

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

download demo and code

Striped Background

Made by yoksel
June 12, 2014

download demo and code

Author

yoksel
February 11, 2014

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

download demo and code

CSS Pattern

CSS only. Too complicated to be used in real code.
Made by yoksel
February 10, 2014

download demo and code

Tablecloth Pattern

Made by yoksel
February 6, 2014

download demo and code

Diamonds Pattern

Made by yoksel
February 6, 2014

download demo and code

Diagonal Stripes

Made by yoksel
February 6, 2014

download demo and code

Author

Jorge Epuña
January 13, 2014

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

download demo and code

Blueprint Pattern (CSS3)

Pure CSS blueprint pattern using CSS3 linear-gradients.
Made by Dean
November 23, 2013

download demo and code

Author

Chris Coyier
February 28, 2013

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

Author

Joshua Hibbert
September 7, 2012

Made with

HTML / CSS

About a code

CSS Background Pattern

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

Responsive: yes

Dependencies: -

Related Articles

Author

Links

Made with

About a code

CSS Only Circular Pattern

Author

Links

Made with

About a code

3D Lighted Cubes Tessellated Pattern - Pure CSS

Author

Links

Made with

About a code

3D Cubes on Hexagonal Grid Tessellated Pattern. No Div. Pure CSS

Author

Links

Made with

About a code

Rhombus vs Octagon Pattern

Author

Links

Made with

About a code

Another CSS pattern

Author

Links

Made with

About a code

Christmas CSS Pattern

Author

Links

Made with

About a code

An Hypnotic CSS Only Pattern

Author

Links

Made with

About a code

3D Chimneys Field Tessellated Pattern. No Div. Pure CSS

Author

Links

Made with

About a code

Rotated Square Pattern

Author

Links

Made with

About a code

Citrus CSS Pattern

Author

Links

Made with

About a code

Pure CSS Pattern: Rhombic

Author

Links

Made with

About a code

Another CSS Pattern

Author

Links

Made with

About a code

Pure CSS Pattern

Author

Links

Made with

About a code

Circular Pattern

Author

Links

Made with

About a code

Diagonal Wavy Pattern

Author

Links

Made with

About a code