Почему не работает задание размеров радиального градиента в процентах «radial-gradient()»?

Question

[Kolenbass]

Есть блок

div {
  background: radial-gradient(circle 20% at 50% 50%, blue , red);    
  width: 1000px;
  height: 1000px;
}

Не могу понять, почему фон не работает в том случае, когда задан размер градиентной фигуры (circle) в процентах, как указано выше (20%).
Другие относительные единицы (vh) работают.

Answer 1

[Medvejonok86]

У вас неправильно указан размер градиента. Нужно указать его в единицах измерения, отличных от процента(%).

background: radial-gradient(circle 20px at 50% 50%, blue , red);

Или как вариант, можете указать позиции цвета:

background: radial-gradient(circle at 50% 50%, blue 10% , red 20%);

UPD:
Так же можно задать ширину и высоту градиента в процентах без явного указания формы градиента:

background: radial-gradient(20% 20% at 50% 50%, blue, red);

Comments

[Kolenbass]

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

Кстати, это ответ не Чата Жпт случайно?

[Medvejonok86]

Kolenbass,

Кстати, это ответ не Чата Жпт случайно?

Нет, это мой личный ответ.
Если вам необходимо задать размер именно в процентах, то можно написать так:

background: radial-gradient(20% 20% at 50% 50%, blue, red);

[Kolenbass]

Medvejonok86, понял. То есть, если задаём с помощью процентов, то это уже эллипс. Я проверил, что такая запись тоже работает (хотя указывать явно фигуру необязательно).

radial-gradient(ellipse 20% 20% at 50% 50%, blue, red);

Спасибо за помощь!