/ Background Patterns

A Nice CSS Background Pattern

A Nice CSS Background Pattern

CSS Pattern

A Nice CSS Background Pattern.

Made with

Html
Css

Author

Ee Venn Soh

Css

body{
  background: 
    /*shape*/
    linear-gradient(115deg, transparent 89%, #e8ddcb 0) -128px -96px,
    linear-gradient(-115deg, transparent 89%, #cdb380 0) 22px -96px,
    linear-gradient(-115deg, #036564 11%, transparent 0) -128px 54px,
    linear-gradient(115deg, #033649 11%, transparent 0) 22px 54px,
    
    /*shape*/
    linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -128px -22px,
    linear-gradient(25deg, transparent 89%, #cdb380 0) -128px 128px,
    linear-gradient(25deg, #036564 11%, transparent 0) 22px -22px,
    linear-gradient(-25deg, transparent 89%, #033649 0) 22px 128px,
    /*shape*/
    linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -53px -96px,
    linear-gradient(25deg, transparent 89%, #cdb380 0) -53px 54px,
    linear-gradient(25deg, #036564 11%, transparent 0) 97px -96px,
    linear-gradient(-25deg, transparent 89%, #033649 0) 97px 54px,
    /*shape*/
    linear-gradient(115deg, transparent 89%, #e8ddcb  0) -53px -21px,
    linear-gradient(-115deg, #cdb380 11%, transparent 0) -53px 129px,
    linear-gradient(-115deg, transparent 89%, #036564 0) 97px -21px,
    linear-gradient(115deg, #033649 11%, transparent 0) 97px 129px;
    
  background-color: #fff;
  background-size: 150px 150px;
  background-repeat: repeat;
}

Demo

See the Pen CSS Pattern by Ee Venn Soh (@vennsoh) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More