/ Background Patterns

Multiple Gradients For Fancy Patterns

Multiple Gradients For Fancy Patterns

Multiple Gradients For Fancy Patterns

A Css Multiple Gradients for Fancy background Patterns.

Made with

Html
Css

Author

Mark Lee

Css

body{
  background:#000;
}
div{
  height: 100vh;
  background-color: #000;
  background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,255,255, .25) 50px,rgba(0,255,255, .25) 100px), repeating-linear-gradient(90deg, rgba(0,255,255, .25), rgba(0,255,255, .25) 50px, transparent 50px, transparent 100px), repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px), repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px), repeating-linear-gradient(transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px,transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px), repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px,transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px);
}

Demo

See the Pen Multiple Gradients for Fancy Patterns by Mark Lee (@leemark) on CodePen.

CodeTea

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

Read More