0 points

CSS Repeating Gradients to Create Stripes or Radial patterns


dashboard

Wed Jan 08 2020 19:00:00 GMT+0000 (UTC)

Posted by @solitaire_4_07 #css #webdev #design #gradients

/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}
content_copy

Lines 5 & 18: define the type of gradient. line 6: the direction of the gradient. lines 8-9: specifies the colours and width of each colour. line 10: 20px is the size of one instance of the gradient. All repeats will have a size of 20px line 19: defines the location where the centerpoint of the initial circle is. In this case 0,0 is the upper left corner. lines 20-21: define colours of opposing ends of the gradient and total size of each instance.

https://css-tricks.com/snippets/css/css-repeating-gradients/

>> Browse more code snippets

more_vert