Search code examples
cssbackground-imagegradientlinear-gradients

CSS Diagonal Gradient with white space

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

Gradient 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%)
}