TOP 51 CSS Background Patterns

TEXTURE

CARDS WITH SIMPLE STRIPE BACKGROUNDS

PURE CSS HALFTONE PATTERN

FLANEL LINES

UNTITLED

CSS SINGLE DIV GEOMETRIC PATTERN

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

1 ELEMENT CARD BACKGROUND PATTERNS

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

ARROW BACKGROUND PATTERN

BACKGROUND PATTERN

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

BLUE SQUARES

Just a simple page with a CSS gradient background.

SIMPLE PATTERNS

1 ELEMENT CARD BACKGROUND PATTERNS

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

100 CSS PATTERNS

Collection of 100 pure CSS background patterns.

BACKGROUND PATTERNS

Grid, flex, and background patterns.

CSS Fruit Background – Pineapple

[su_button url=” https://codepen.io/AngelaVelasquez/pen/yVEOpY ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

SVG AND CSS SQUIGGLY PATTERN

A neat little wave pattern with SVG and CSS.

CSS Dot Pattern/Grid Background

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

[su_button url=” https://codepen.io/edmundojr/pen/xOYJGw ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS3 Gradient Pattern

[su_button url=” https://codepen.io/fox_hover/pen/KgwYJy ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Underwater CSS Pattern

CSS LATTICE PATTERN

Pure CSS lattice background pattern.

CSS BACKGROUNDS

Playing around with gradients.

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

CSS Background Patterns – Boxes

[su_button url=” https://codepen.io/praveenpuglia/pen/MyNpXQ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

6 Stop Shirt Pattern

[su_button url=” https://codepen.io/thebabydino/pen/dMaRYx ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

BASKET WEAVE PATTERN

CSS pattern: basket weave.

Simple Pattern

[su_button url=” https://codepen.io/byrass/pen/JYrxLX ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS PATTERN

CSS modern bricks pattern.

Silver Scale Pattern

[su_button url=” https://codepen.io/yoksel/pen/xdHjA ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Circles Pattern

[su_button url=” https://codepen.io/yoksel/pen/ijxKy ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Waves Pattern

[su_button url=” https://codepen.io/yoksel/pen/DiIBm ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Drops Pattern

[su_button url=” https://codepen.io/yoksel/pen/oeksa ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Hearts Pattern

[su_button url=” https://codepen.io/yoksel/pen/jufvg ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Circles And Dottes Pattern

[su_button url=” https://codepen.io/yoksel/pen/muxnF ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Corners Pattern

[su_button url=” https://codepen.io/yoksel/pen/Etomx ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Squares Pattern

[su_button url=” https://codepen.io/yoksel/pen/saJtl ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Corners Pattern

[su_button url=” https://codepen.io/yoksel/pen/EHbBw ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Argyle Pattern

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

[su_button url=” https://codepen.io/carpenumidium/pen/jbBOxp ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Jason Quote Bg Pattern

[su_button url=” https://codepen.io/babbardel/pen/BNgZwM ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

HANDKERCHIEF PATTERN

CSS handkerchief pattern.

HEXAGONS PATTERN

Animated neon hexagons pattern with SVG and CSS.

CSS Pattern

[su_button url=” https://codepen.io/vennsoh/pen/iFKyo ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

PATTERN CSS3

Simple pattern in HTML and CSS.

CSS Pattern With CSS Blend Mode

[su_button url=” https://codepen.io/marinda-s/pen/dtehw ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Striped Background

[su_button url=” https://codepen.io/yoksel/pen/khprw ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Frosty Spirals Pattern

[su_button url=” https://codepen.io/yoksel/pen/mEakp ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS Pattern

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

[su_button url=” https://codepen.io/yoksel/pen/dezAt ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Tablecloth Pattern

[su_button url=” https://codepen.io/yoksel/pen/ajJes ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Diamonds Pattern

[su_button url=” https://codepen.io/yoksel/pen/rqcHC ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Diagonal Stripes

[su_button url=” https://codepen.io/yoksel/pen/uBdhC ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

SIMPLE PATTERN

Gradients, shapes, rgba…

Multiple Gradients For Fancy Patterns

[su_button url=” https://codepen.io/leemark/pen/icHjI ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

Blueprint Pattern (CSS3)

Pure CSS blueprint pattern using CSS3 linear-gradients.

[su_button url=” https://codepen.io/tennowman/pen/ynrih ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

BACKGROUND TRIANGLE PATTERN

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