TEXTURE

Demo image: Texture

Author

  • Miriam

Made with

  • HTML / CSS

CARDS WITH SIMPLE STRIPE BACKGROUNDS

Demo image: Cards With Simple Stripe Backgrounds

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

PURE CSS HALFTONE PATTERN

Demo image: Pure CSS Halftone Pattern

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

FLANEL LINES

Demo image: Flanel Lines

Author

  • Travis

Made with

  • HTML / CSS

UNTITLED

Demo image: Untitled

Author

  • Bennett Feely

Made with

  • HTML / CSS (SCSS)

CSS SINGLE DIV GEOMETRIC PATTERN

A rainbow, geometric repeating background for your favorite HTML element.

Demo image: CSS Single DIV Geometric Pattern

Author

  • Lynn Fisher

Made with

  • HTML / CSS (Stylus)

1 ELEMENT CARD BACKGROUND PATTERNS

Pure CSS, simple and compact method, no SVG, no images other than CSS gradients.

Demo image: 1 Element Card Background Patterns

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

ARROW BACKGROUND PATTERN

Demo image: Arrow Background Pattern

Author

  • CodeMeNatalie

Made with

  • HTML (Slim) / CSS (SCSS)

BACKGROUND PATTERN

See the Pen Background Pattern by eZ UI Design (@eZ_UI) on CodePen.light

Author

  • eZ UI Design

Made with

  • HTML / CSS (SCSS)

BLUE SQUARES

Just a simple page with a CSS gradient background.

Demo image: Blue Squares

Author

  • Michael van den Berg

Made with

  • HTML / CSS (SCSS)

SIMPLE PATTERNS

Demo image: Simple Patterns

Author

  • Carlita Centeno

Made with

  • HTML / CSS (SCSS)

1 ELEMENT CARD BACKGROUND PATTERNS

Fully functional only if conic-gradient() has native support.

Demo image: 1 Element Card Background Patterns

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

100 CSS PATTERNS

Collection of 100 pure CSS background patterns.

Demo image: CSS Patterns

Author

  • Sandra Davis

Made with

  • HTML / CSS

BACKGROUND PATTERNS

Grid, flex, and background patterns.

Demo image: Background Patterns

Author

  • Liam

Made with

  • HTML
  • CSS/SCSS

CSS Fruit Background – Pineapple

Demo Image: CSS Fruit Background - Pineapple

Author

  • Angela Velasquez

Made with

  • HTML / CSS
Demo and Download

SVG AND CSS SQUIGGLY PATTERN

A neat little wave pattern with SVG and CSS.

Demo image: SVG And CSS Squiggly Pattern

Author

  • Chris Johnson

Made with

  • HTML/Pug
  • CSS/SCSS

CSS Dot Pattern/Grid Background

Simple technique to create a dot pattern or dot grid background. Support: all modern browsers and IE9+.

Demo Image: CSS Dot Pattern/Grid Background

Author

  • Edmundo Santos

Made with

  • Html / CSS
Demo and Download

CSS3 Gradient Pattern

Demo Image: CSS3 Gradient Pattern

Author

  • fox_hover

Made with

  • Html / CSS
Demo and Download

Underwater CSS Pattern

Demo Image: Underwater CSS Pattern

Author

  • Laura Sage

Made with

  • Html / CSS

CSS LATTICE PATTERN

Pure CSS lattice background pattern.

Demo image: CSS Lattice Pattern

Author

  • ampersand_xyz

Made with

  • HTML/Pug
  • CSS/Sass

CSS BACKGROUNDS

Playing around with gradients.

See the Pen CSS Backgrounds by joshuar (@joshuar) on CodePen.light

Author

  • joshuar

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

CSS Background Patterns – Boxes

Demo Image: CSS Background Patterns - Boxes

Author

  • Praveen Puglia

Made with

  • Html / CSS
Demo and Download

6 Stop Shirt Pattern

Demo Image: 6 Stop Shirt Pattern

Author

  • Ana Tudor

Made with

  • Html / CSS
Demo and Download

BASKET WEAVE PATTERN

CSS pattern: basket weave.

Demo image: Basket Weave Pattern

Author

  • Mark Deutsch

Made with

  • CSS/Less

Simple Pattern

Demo Image: Simple Pattern

Author

  • Gabriel R

Made with

  •  CSS
Demo and Download

CSS PATTERN

CSS modern bricks pattern.

Demo image: CSS Pattern

Author

  • Praveen Puglia

Made with

  • HTML
  • CSS

Silver Scale Pattern

Demo Image: Silver Scale Pattern

Author

  • yoksel

Made with

  •  CSS (SCSS)
Demo and Download

Circles Pattern

Demo Image: Circles Pattern

Author

  • yoksel

Made with

  • CSS
Demo and Download

Waves Pattern

Demo Image: Waves Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Drops Pattern

Demo Image: Drops Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Hearts Pattern

Demo Image: Hearts Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Circles And Dottes Pattern

Demo Image: Circles And Dottes Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Corners Pattern

Demo Image: Corners Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Squares Pattern

Demo Image: Squares Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Corners Pattern

Demo Image: Corners Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Argyle Pattern

Attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients).

Demo Image: Argyle Pattern

Author

  • carpe numidium

Made with

  • CSS
Demo and Download

Jason Quote Bg Pattern

Demo Image: Jason Quote Bg Pattern

Author

  • George Olaru

Made with

  • CSS (SCSS)
Demo and Download

HANDKERCHIEF PATTERN

CSS handkerchief pattern.

Demo image: Handkerchief Pattern

Author

  • Katy DeCorah

Made with

  • HTML/Haml
  • CSS/SCSS

HEXAGONS PATTERN

Animated neon hexagons pattern with SVG and CSS.

Demo image: Hexagons Pattern

Author

  • Amelia Bellamy-Royds

Made with

  • HTML
  • CSS

CSS Pattern

Demo Image: CSS Pattern

Author

  • Ee Venn Soh

Made with

  • CSS
Demo and Download

PATTERN CSS3

Simple pattern in HTML and CSS.

Demo image: Pattern CSS3

Author

  • Gino Farías

Made with

  • HTML/Haml
  • CSS/Less

CSS Pattern With CSS Blend Mode

Demo Image: CSS Pattern With CSS Blend Mode

Author

  • marinda

Made with

  • CSS (SCSS)
Demo and Download

Striped Background

Demo Image: Striped Background

Author

  • yoksel

Made with

  • CSS
Demo and Download

Frosty Spirals Pattern

Demo Image: Frosty Spirals Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

CSS Pattern

CSS only. Too complicated to be used in real code.

Demo Image: CSS Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Tablecloth Pattern

Demo Image: Tablecloth Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Diamonds Pattern

Demo Image: Diamonds Pattern

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

Diagonal Stripes

Demo Image: Diagonal Stripes

Author

  • yoksel

Made with

  • CSS (SCSS)
Demo and Download

SIMPLE PATTERN

Gradients, shapes, rgba…

Demo image: Simple Pattern

Author

  • Jorge Epuña

Made with

  • HTML/Haml
  • CSS/Less

Multiple Gradients For Fancy Patterns

Demo Image: Multiple Gradients For Fancy Patterns

Author

  • Mark Lee

Made with

  • CSS
Demo and Download

Blueprint Pattern (CSS3)

Pure CSS blueprint pattern using CSS3 linear-gradients.

Demo Image: Blueprint Pattern (CSS3)

Author

  • Dean

Made with

  • CSS
Demo and Download

BACKGROUND TRIANGLE PATTERN

Crappy recreation of the book cover of “The Flame Alphabet”.

Demo image: Background Triangle Pattern

Author

  • Chris Coyier

Made with

  • HTML (Haml) / CSS (SCSS)

Categorized in: