Mike Mike - 6 months ago 48
CSS Question

CSS3 swirl gradient

Is a gradient like this is possible with pure CSS3? I haven't found a way to create the "swirl".

enter image description here

Answer Source

I have a prototype going using box-shadows:

.box {
  width: 500px;
  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;
<div class="box"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download