/ Background Patterns

2 CSS Background Boxes Patterns

2 CSS Background Boxes Patterns

CSS Background Patterns - Boxes

2 CSS Background Boxes Patterns.

Made with

Html
Css

Author

Praveen Puglia

Css

html, body {
  height:100%;
}
body {
  display:flex;
  margin: 0;
  --c : rgba(255,255,255,0.7);
  --t : transparent;
}
.col {
  flex:1;
}
.pat-1 {
	background-image:
  repeating-linear-gradient(45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0),
  repeating-linear-gradient(-45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0),
  linear-gradient(to bottom right, #FC354C, #0ABFBC);
}
.pat-2 {
	background-image:
  repeating-linear-gradient(45deg, var(--t) 0, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 0),
  repeating-linear-gradient(-45deg, var(--t) 0, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 0),
  linear-gradient(to bottom left, #FC354C, #0ABFBC);
}

Demo

See the Pen CSS Background Patterns - Boxes by Praveen Puglia (@praveenpuglia) on CodePen.

CodeTea

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

Read More