Как сделать данный градиент?
Ответы (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>
