html - CSS Gradient Smooth on Shape - Stack Overflow

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>

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>

• html
• css
• css-gradients

Share Improve this question Follow edited Feb 4 at 14:42 Naeem Akhtar 1,27011 gold badge1212 silver badges2323 bronze badges asked Feb 4 at 13:14 User96User96 311 silver badge11 bronze badge 1

• 1 Please click edit, then the button marked [<>] and produce a minimal reproducible example – mplungjan Commented Feb 4 at 13:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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>