htmlcsscss-gradients

CSS Gradient Smooth on Shape

I have been trying to make this

effect using css, but i kind of stuck, i can't figure it out how to make the color of gradient look smooth. it's possible to do ?

so far this what i got

.bg-gradient {
  height: 400px;
  width: 300px;
  background: 
    conic-gradient(at 50% 5%,
      transparent 43%,
      rgba(80, 112, 230, 0.8) 47%,
      rgba(55, 217, 214, 0.6) 53%,
      transparent 57.5%) 50% -25px / 100% 100%;
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(3px);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
}
<div class="bg-gradient"></div>

Solution

  • This is as far as I could get, you might need to fine-tune colors, angles, etc.

    .bg-gradient {
  height: 300px;
  width: 400px;
  background-image:
    radial-gradient(circle at 50% 20%, #fff 30%, #211),
    conic-gradient(at 27% 0, #cefa 30%, #211 58%),
    conic-gradient(at 73% 0, #211 42%, #35fa 70%),
    linear-gradient(to left, #35f 27%, #cef5 50%, #cef 73%);

  background-blend-mode: multiply;
}
    <div class="bg-gradient"></div>