Как сделать данный градиент?

именно фон ( цвет) не вырез.....

введите сюда описание изображения


Ответы (2 шт):

Автор решения: puffleeck

#x{
display: inline-block;
height: 300px;
width: 500px;
border: 1px solid black;
color: white;
font-size: 3em;
background:
radial-gradient(circle closest-side at 20px 20px, darkred 40px, red 100px, transparent 250px),
radial-gradient(circle closest-side at 480px 10px, darkblue 40px, blue 100px, transparent 250px),
radial-gradient(circle closest-side at 480px 150px, darkgreen 40px, green 100px, transparent 250px),
radial-gradient(circle closest-side at 20px 170px, darkorange 40px, orange 100px, transparent 250px),
radial-gradient(circle closest-side at 250px 250px, darkviolet 40px, violet 100px, transparent 250px);
}
<div id='x'>развлекайтесь</div>

→ Ссылка
Автор решения: novvember

Можно нарисовать так же, как он нарисован в фигме:

.awesome-gradient {
  --width: 250px; /* <== Change it to resize gradient */
  width: var(--width);
  aspect-ratio: 3 / 2;
  background-color: #424B6A;
  position: relative;
  overflow: hidden;
}

.awesome-gradient__ellipse {
  display: block;
  position: absolute;
  width: 44%;
  height: 81%;
  border-radius: 50%;
  filter: blur(calc(0.02 * var(--width)));
}

.awesome-gradient__element_1 {
  left: 71%;
  top: 45%;
  background-color: #923326;
}

.awesome-gradient__element_2 {
  left: 66%;
  top: -19%;
  background-color: #ADA18A;
}

.awesome-gradient__element_3 {
  left: 29%;
  top: -7%;
  background-color: #49456B;
}

.awesome-gradient__element_4 {
  left: -2%;
  top: 43%;
  background-color: #2D697D;
}

.awesome-gradient__element_5 {
  left: -13%;
  top: -21%;
  background-color: #245832;
}

.awesome-gradient__rectangle {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(217, 217, 217, 0.01);
  backdrop-filter: blur(calc(0.157 * var(--width)));
}
<div class="awesome-gradient">
  <span class="awesome-gradient__ellipse awesome-gradient__element_1"></span>
  <span class="awesome-gradient__ellipse awesome-gradient__element_2"></span>
  <span class="awesome-gradient__ellipse awesome-gradient__element_3"></span>
  <span class="awesome-gradient__ellipse awesome-gradient__element_4"></span>
  <span class="awesome-gradient__ellipse awesome-gradient__element_5"></span>
  <span class="awesome-gradient__rectangle"></span>
</div>

→ Ссылка