repeating gradient css code example

Example 1: repeating-linear-gradient

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
  /* with multiple color stop lengths */
  background-image: repeating-linear-gradient(-45deg, 
      transparent 0 20px, 
      black 20px 40px);
}

Example 2: repeating-conic-gradient css

conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

Tags:

Css Example