CSS3漩涡渐变

Question

使用纯CSS3是否可以实现这样的渐变？我还没有找到一种方法来创造＆＃34;漩涡＆＃34;。

Answer 1

如果你设置一个类似于这个样式的伪元素，并且应用了一些透明度，我认为你可以实现你的请求

.test {
  height: 400px;
  width: 400px;
  position: relative;
  border-top-left-radius: 180px 250px;
  margin: 100px 200px;
  box-shadow: -15px -15px 60px -20px lightgreen,
   inset 10px 10px 15px -10px lightblue;
}

<div class="test"></div>

Answer 2

我有一个使用盒子阴影的原型：

＆＃13;

＆＃13;

.box {
  width: 500px;
  height:200px;
  background: linear-gradient(to right, #50bcf3 , #60ec94);
  overflow: hidden;
}

.box:before, .box:after {
  content: "";
  height: 100%;
  width: 200px;
  display: block;
  position: relative;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

.box:before {
  left: 200px;
  top: 100px;
  box-shadow: -30px 0 40px -10px #60ec94;
  transform: skewX(-10deg);
}

.box:after {
  left: 200px;
  top: -300px;
  transform: skewX(-10deg);
  box-shadow: inset -40px 0 70px -30px #60ec94;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;