Создайте градиент как изображение

Question

Как я могу создать градиент, как это изображение?

Это самое близкое, что у меня есть, но это не то же самое:

.background {
  position: relative;
  background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 ) ;
  width: 100%;
  height: 300px;
  -webkit-transform: skewY(-1.5deg);
  -moz-transform: skewY(-1.5deg);
  -ms-transform: skewY(-1.5deg);
  -o-transform: skewY(-1.5deg);
  transform: skewY(-1.5deg);
}

<div class="background"></div>

Answer 1

Может быть, вы могли бы пойти на это путем наложения полупрозрачных градиентов:

CSS

.grad {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}

.outer {
  background: linear-gradient(45deg, rgba(255,83,21,0.21) 0%,rgba(254,55,112,0.87) 100%);
}

.inner {
  background: linear-gradient(45deg, rgba(255,83,21,0.5) 0%,rgba(254,55,112,0.87) 100%); 
}

HTML

<div class='outer grad'>
  <div class='inner grad'></div>
</div>

Если вам это нужно, вращение на изображении выше может быть достигнуто с transform: rotate(10deg) а не перекос.

Answer 2

Чтобы создать градиент, это может быть полезно для вас:

Градиент генератор

Если вы также хотите иметь границу, я бы установил градиент в качестве фона div и установил границу div так, как вы хотите.

Создано перо: https://codepen.io/Raphael_Bucher/pen/wyQRYr

HTML

<div class="gradient-wrapper">
<div>

CSS

.gradient-wrapper {
  height: 250px;
  width: 500px;
  margin-top: 50px;
  background-image: linear-gradient(to right bottom, #fa9049, #ff8153, 
  #ff7260, #ff656e, #fe597e);
  transform: skewY(-4deg);
 -moz-transform: skewY(-4deg);
 -webkit-transform: skewY(-4deg);
}