CSS Diagonal Gradient with white space

Issue

I need help recreating this background gradient with CSS (don’t mind the gray boxes)

At the moment my code looks like this, but the colors go from left to right and not bottom to top like in the image, if I change the degrees the whole direction changes:

 body {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(211, 71, 83, 1) 32%,
    rgba(98, 76, 94, 1) 52%,
    rgba(59, 70, 92, 1) 69%,
    rgba(255, 255, 255, 0) 69%
  );
}

Solution

Keep a straight gradient and rely on clip-path to create the shape:

html:before {
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(red,blue);
  clip-path:polygon(50% 0,100% 0,50% 100%,0 100%)
}

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0