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

  1. CSS Animated Backgrounds
  2. CSS Fixed Backgrounds
  3. CSS Particle Backgrounds
  4. CSS Triangle Backgrounds
  5. jQuery Background Plugins
Demo image: CSS Only Circular Pattern

Author

  • Temani Afif

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

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

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

Demo image: Rhombus vs Octagon Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Rhombus vs Octagon Pattern

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

Responsive: yes

Dependencies: -

Demo image: Another CSS pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Another CSS pattern

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

Responsive: yes

Dependencies: -

Demo image: Christmas CSS Pattern

Author

  • Temani Afif

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

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

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

Demo image: Rotated Square Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Rotated Square Pattern

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

Responsive: yes

Dependencies: -

Demo image: Citrus CSS Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Citrus CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Pattern: Rhombic

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Pattern: Rhombic

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

Responsive: yes

Dependencies: -

Demo image: Another CSS Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Another CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: Circular Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Circular Pattern

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

Responsive: yes

Dependencies: -

Demo image: Diagonal Wavy Pattern

Author

  • Temani Afif

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

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Pattern: Connectors

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

Responsive: yes

Dependencies: -

Demo image: Xmassy Patterns

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

Xmassy Patterns

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

Responsive: yes

Dependencies: -

Demo image: Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Pattern

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

Responsive: yes

Dependencies: -

Demo image: Hypnotic Pattern Animation

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Hypnotic Pattern Animation

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Pattern: Tablets

Author

  • Ana Tudor

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

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

Demo image: Pure CSS Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Braid Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Braid Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Mosaic Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Mosaic Pattern

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

Responsive: yes

Dependencies: -

Demo image: Quarter a Circle Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Quarter a Circle Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Geometric Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Geometric Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Simple Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Simple Pattern

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

Responsive: yes

Dependencies: -

Demo image: Dashed Polka Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Dashed Polka Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Simple Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Simple Pattern

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

Responsive: yes

Dependencies: -

Demo image: Dark Mode Mastodon Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Dark Mode Mastodon Pattern

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

Responsive: yes

Dependencies: -

Demo image: Triangular Pattern

Author

  • Temani Afif

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

Made with

  • HTML / CSS

About a code

Square Inside Circle Pattern

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

Responsive: yes

Dependencies: -

Demo image: CSS Only Rhombus Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Only Rhombus Pattern

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

Responsive: yes

Dependencies: -

Demo image: Generative Art

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Generative Art

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

Responsive: yes

Dependencies: -

Demo image: Generative Art

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Generative Art

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

Responsive: yes

Dependencies: -

Demo image: Background Pattern

Author

  • Temani Afif

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

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

Made with

  • HTML / CSS

About a code

CSS Only Rotated Square Pattern

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

Responsive: yes

Dependencies: -

Demo image: CSS Only Circles Pattern

Author

  • Temani Afif

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

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

Demo image: CSS Only Radial Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Only Radial Pattern

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

Responsive: yes

Dependencies: -

Demo image: CSS Braided Lines Pattern

Author

  • Temani Afif

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

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

Demo image: Strange Zig-Zag Pattern

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Strange Zig-Zag Pattern

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

Responsive: yes

Dependencies: -

Demo image: CSS Only Square Pattern

Author

  • Temani Afif

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

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

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

Demo image: CSS Only Cubic Pattern

Author

  • Temani Afif

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

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

Demo image: CSS Only Pattern

Author

  • Temani Afif

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

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

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

Demo image: Pattern

Author

  • yuanchuan

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS

About a code

Brick Tessellated Pattern. No Div. Pure CSS

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

Responsive: yes

Dependencies: -

Demo image: Pentagon

Author

  • Olex

Made with

  • HTML / CSS (Less)

About a code

Pentagon

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

Responsive: no

Dependencies: -

Demo image: Cubic Tessellation

Author

  • Epogee Design

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

Made with

  • HTML / CSS

About a code

Tessellation Experiment #2. Abstract

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

Responsive: no

Dependencies: -

Demo image: Simplifying CSS Patterns

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Simplifying CSS Patterns

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

Responsive: no

Dependencies: -

Demo image: Pattern

Author

  • ryan

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

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

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

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

Demo image: Pattern

Author

  • yuanchuan

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

Made with

  • HTML / CSS

About a code

CSS Only Rectangular Pattern

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

Responsive: yes

Dependencies: -

Demo image: Pattern

Author

  • Thea

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

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

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

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS (SCSS)

About a code

Windows 95 Background in CSS

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

Responsive: yes

Dependencies: -

Demo image: Background Patterns

Author

  • yuanchuan

Made with

  • HTML / CSS

About a code

Background Patterns

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

Responsive: yes

Dependencies: -

Demo image: Nezuko Kamado

Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

Nezuko Kamado

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

Responsive: yes

Dependencies: -

Demo image: Background Pattern

Author

  • G V TANISH VETTRIVEL

Made with

  • HTML / CSS

About a code

Background Pattern

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

Responsive: yes

Dependencies: -

Demo image: Background Pattern

Author

  • G V TANISH VETTRIVEL

Made with

  • HTML / CSS

About a code

Background Pattern

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

Responsive: yes

Dependencies: -

Demo image: Background Pattern

Author

  • G V TANISH VETTRIVEL

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

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

Made with

  • HTML / CSS (SCSS)

About a code

Simple CSS Gradient Patterns

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Pattern

Author

  • Inès

Made with

  • HTML / CSS

About a code

Pure CSS Pattern

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

Responsive: yes

Dependencies: -

Demo image: Patterns and Gradients

Author

  • Akshaya Venky

Made with

  • HTML / CSS (SCSS)

About a code

Patterns and Gradients

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

Responsive: yes

Dependencies: -

Demo image: Plaid background

Author

  • luisanogueira

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

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Border Caterpillar

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

Responsive: yes

Dependencies: -

Demo image: One Div Pie Background

Author

  • Olivia Ng

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

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

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

Demo image: Box Shadow Patterns

Author

  • Manan Tank

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

Made with

  • HTML / CSS (SCSS)

About a code

Simple Pure CSS Café Wall Illusion

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

Responsive: yes

Dependencies: -

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

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

Author

  • Chris Smith

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

Demo image: background-patterns

Author

  • Webstoryboy

Made with

  • HTML / CSS

About a code

background-patterns

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

Responsive: yes

Dependencies: -

Demo image: background-patterns

Author

  • Webstoryboy

Made with

  • HTML / CSS

About a code

background-patterns

Compatible browsers: Chrome, Edge, Firefox, 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: Some Patterns

Author

  • Elitsa Dimitrova

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

Made with

  • HTML / CSS

About a code

Playing with background-blend-mode

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

Responsive: no

Dependencies: -

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: CSS Heart Polka-dot Background Pattern

Author

  • Brett Peters

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

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

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

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: repeating-linear-gradient background-image

Author

  • Zed Dash

Made with

  • HTML / CSS (SCSS)

About a code

repeating-linear-gradient background-image

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

Responsive: no

Dependencies: -

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

Author

  • Laura Sage

Made with

  • HTML / CSS

About a code

Underwater CSS Pattern

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

Responsive: yes

Dependencies: -

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: The Cicada background + background-blend-modes

Author

  • yoksel

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

Made with

  • HTML / CSS

About a code

Background Blend Mode Sample

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

Responsive: no

Dependencies: -

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

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Colored Paper

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

Responsive: yes

Dependencies: -

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

Demo image: CSS Background Pattern

Author

  • Joshua Hibbert

Made with

  • HTML / CSS

About a code

CSS Background Pattern

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

Responsive: yes

Dependencies: -