Как делаются такие шары?

Question

Какие свойства нужны чтобы получить такой шар?

Я думал что нужен background: linear-gradient и filter: blur. Но я уже вижу что результат будет другой, не как на первом изображении.

div {
position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(0deg, #d5d5d5, #831F10);
    border-radius: 100%;
    filter: blur(10px);
  }

<div></div>

Answer 1

Все градиенты могут иметь больше, чем два цвета. В представленном исходном изображении именно такая ситуация - используется три цвета.

body {
  display: flex;
  justify-content: center;
  background-color: #1d1d1d;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--size);
  aspect-ratio: 1 / 1;
}

div::before {
  content: '';
  height: 66%;
  width: 66%;
  border-radius: 100%;
  background-image: linear-gradient(180deg, #951c04 10%, #f97f06, #e6e6e6 80%);
  filter: blur(calc(var(--size) / 10));
}

<div style="--size: 300px"></div>
<div style="--size: 200px"></div>
<div style="--size: 100px"></div>

БЛОГ НА HUSL

Как делаются такие шары?

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