生成像图像一样的渐变答案

【问题标题】：Generate gradient like the image生成像图像一样的渐变
【发布时间】：2018-08-06 00:17:27
【问题描述】：

如何生成像这张图片一样的渐变？

这是迄今为止我得到的最接近的，但还不一样：

.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);
}

&lt;div class="background"&gt;&lt;/div&gt;

【问题讨论】：

你试过rotate而不是skew吗？
这是我的帮助gradient-scanner.com
我认为除了倾斜之外还有旋转。（原图的角不是90度）。
最大的问题不是旋转，而是颜色。
我也认为这不是径向渐变而是 2 线性渐变

标签： css linear-gradients radial-gradients

【解决方案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)实现上图中的旋转，而不是倾斜。

【讨论】：

【解决方案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);
}

【讨论】：