Маскированный и слоёный CSS градиенты

Небольшой трюк с маской и слоёным градиентом (CSS linear-gradient) для четырёх углов контейнера.

body {
  background: linear-gradient(90deg, red, cyan);
  min-height: 100vh;
  
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    mask-image: linear-gradient(to bottom, transparent, black);
    background: linear-gradient(90deg, hotpink, rebeccapurple);	
  }
}

See the Pen
Masked & Layered Linear Gradients by xhtml_ru (@xhtml_ru)
on CodePen.