Stripes background

index.pug

.stripes-container
  .stripes.stripes--teal
    - for (var x = 0; x < 5; x++)
      span(class='s'+(x+1))
.stripes-container
  .stripes.stripes--blue
    - for (var x = 0; x < 6; x++)
      span(class='s'+(x+1))
.stripes-container
  .stripes.stripes--peach
    - for (var x = 0; x < 6; x++)
      span(class='s'+(x+1))

stripes-background.markdown

Stripes background

CSS Grid stripes background

A Pen by Veronika Novikova on CodePen.

License.

style.scss

$stripe-height: 64px;
$content-columns: 12 !global;
$gutter-columns: 4 !global;
$gutter-column-width: 1fr !global;

/* Colors */
$stripes_blue: ('1': #4d86c5, '2': #0077cc, '3': #fff, '4': #dde9f5, '5': #f3fbff);
$stripes_peach: ('1': #fce4ba, '2': #fecba0, '3': #ffb375);

@mixin stripesBG($color) {
  background-image: linear-gradient($color, mix($color,#fff,80) 10%, mix($color,#fff,24) 38%, mix($color,#fff,12) 48%, mix($color,#fff,4) 62%);
}

.stripes-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 900px;
  height: 100%;
  &:before{
    content: "";
    position: absolute;
    bottom: 30%;
    left: 0;
    z-index: -1;
    background-color: #f6f9fc;
    width: 100%;
    height: 50%;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-12deg);
  }
}

.stripes {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 90vh;
  transform: skewY(-12deg);
  transform-origin: 0;
  
  &--blue {
    $rows: 6;
    $content-columns: 10;
    grid: repeat($rows, (100% / $rows))/repeat($content-columns,$gutter-column-width);
    @include stripesBG(map-get($stripes_blue, '1'));
  
    .s1 {
      grid-row: 2;
      grid-column: span 3;
      background: linear-gradient(100grad, rgba(map-get($stripes_blue,'5'),.4), rgba(map-get($stripes_blue,'5'),.15) 20%, rgba(map-get($stripes_blue,'5'),0));
    }
    .s2 {
      grid-area: 3 / span 4 / auto / -1;
      background: linear-gradient(100grad, rgba(map-get($stripes_blue,'2'),0), rgba(map-get($stripes_blue,'2'),.05) 40%, rgba(map-get($stripes_blue,'2'),.35));
    }
    .s3 {
      grid-row: 4;
      grid-column: span 5;
      background: linear-gradient(100grad, map-get($stripes_blue,'3') 50%, rgba(map-get($stripes_blue,'3'), 0));
    }
    .s4 {
      grid-area: 4 / span 5 / auto / -1;
      background: linear-gradient(100grad,rgba(map-get($stripes_blue,'4'),0) 10%,rgba(map-get($stripes_blue,'4'),.05));
    }
    .s5 {
      grid-area: auto/ 1 / -2 / -1;
      background: linear-gradient(100grad, rgba(map-get($stripes_blue,'2'),.01) 10%, #fff 30%, rgba(map-get($stripes_blue,'2'),.05));
    }
    .s6 {
      grid-area: auto/ 1 / -1 / span 4;
      background: linear-gradient(100grad, rgba(#fff,.64) 10%, #fff 30%, rgba(#fff, 0));
    }
  }
  /* -------- End of blue stripes -------- */
  
  &--peach {
    $content-column-width: minmax(0,calc(1040px / #{$content-columns}));
    
    display: grid;
    align-content: end;
    justify-content: end;
    grid-template-rows: repeat(auto-fill,$stripe-height);
    grid-template-columns:
      [viewport-start] 1fr [left-gutter-start] repeat($gutter-columns, $gutter-column-width)
      [left-gutter-end content-start] repeat($content-columns, $content-column-width)
      [content-end right-gutter-start] repeat($gutter-columns, $gutter-column-width)
      [right-gutter-end] 1fr [viewport-end];
    
    .s1 {
      grid-row-start: -7;
      grid-column: 14/viewport-end;
      background-color: map-get($stripes_peach, '1');
    }
    .s2 {
      grid-row-start: -6;
      grid-column: 15/span 3;
      background-color: map-get($stripes_peach, '2');
    }
    .s3 {
      grid-row-start: -6;
      grid-column: 18/span 3;
      background-color: map-get($stripes_peach, '3');
    }
    .s4 {
      grid-row-start: -8;
      grid-column: 13/span 6;
      border: 2px solid #c5d5e8;
      border-bottom: none;
    }
    .s5 {
      grid-row-start: -5;
      grid-column: 2/span 3;
      border: 2px solid #c5d5e8;
    }
    .s6 {
      grid-row-start: -4;
      grid-column: 3/span 4;
      background-color: map-get($stripes-peach, '1');
    }
  }
  /* -------- End of peach stripes -------- */
  
  &--teal {
    $rows: 6;
    $content-columns: 10;
    grid: repeat($rows, (100% / $rows))/repeat($content-columns,$gutter-column-width);
    background: linear-gradient(90deg,#48c9b0,#88e293);
    .s1 {
      grid-area: #{$rows - 3} / 1 / auto / span 2;
      background: linear-gradient(90deg,#60d7bf,#88e4b5);
    }
    .s2 {
      grid-area: #{$rows - 3} / -2 / auto / span 1;
      background: linear-gradient(90deg,#45b39d,#16a085);
      opacity: 0.48;
    }
    .s3 {
      grid-area: #{$rows - 2} / 2 / auto / span 3;
      background: linear-gradient(90deg,#16a085,#45b39d);
      opacity: 0.48;
    }
    .s4 {
      grid-area: #{$rows - 1} / span 2 / auto / -1;
      background: linear-gradient(90deg, #aaf3b5,#bcf0af);
      opacity: 0.8;
    }
    .s5 {
      grid-area: #{$rows} / 1 / auto / -1;
      background: linear-gradient(90deg, #bcf0af, #88e4b5)
    }
  }
}