像图像一样生成渐变

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

要创建渐变，这可能对您有所帮助：

Gradient generator

如果你想拥有边框，我会将渐变设置为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);
}