Что принимает radial-gradient()
background: radial-gradient(circle at center, #F5A63D 0%, #A8340F 100%);
Форма, позиция после at, затем цветовые точки. Точки отмеряются от центра
наружу: 0% — середина, 100% — край.
| Часть | Варианты |
| --- | --- |
| Форма | circle, ellipse |
| Позиция | center, top, bottom left, 30% 70%, … |
| Размер (необязательно) | closest-side, farthest-corner, длина |
Для чего радиальные градиенты
Блики и мягкое свечение за заголовком, виньетки, затемняющие края фото,
подсветка кнопки, которая должна выглядеть чуть освещённой, и круговые
заливки в сочетании с резкими точками. Прямолинейные переходы — в
линейном генераторе; разворот вокруг точки —
это conic-gradient, он в общем генераторе градиентов.
Резкие точки рисуют круги
Две точки на одной позиции — #A8340F 40%, transparent 40% — дают чёткий
диск. Наложите несколько с разными позициями — получите точки, кольца и
бейджи статуса вообще без картинок.
Считается на вашем устройстве
Превью — это CSS в вашем браузере. Ничего не загружается; ссылка в адресной строке несёт все настройки.
Вопросы
Круг или эллипс — в чём разница?+
Круг расходится равномерно во все стороны и сохраняет форму, каким бы ни был блок; эллипс растягивается по блоку, и на широком элементе кольца становятся широкими. В CSS по умолчанию эллипс; здесь по умолчанию круг, потому что радиальные градиенты чаще всего нужны для бликов и виньеток.
Что делает `at`?+
Сдвигает центр. `at top left` начинает градиент в углу, `at center` — в середине. Работают и длины с процентами — `at 30% 70%` — так источник света ставят ровно туда, где он нужен на фото.
Как сделать мягкий блик над секцией?+
Радиальный от светлого или полупрозрачного белого к прозрачному, у верхнего края: `radial-gradient(circle at 50% 0%, rgb(255 255 255 / .18), transparent 60%)`. Позиция второй точки задаёт, как далеко тянется свечение.
Почему градиент не доходит до углов?+
Потому что кольцо у круга круглое: радиус равен расстоянию до дальнего угла, но углы широкого блока всё равно остаются снаружи. Добавьте размер — `circle closest-side` или явный `circle 60%` — либо возьмите эллипс.
Можно для текста?+
Да — генератор градиентного текста на этом сайте принимает и радиальный. Работу делает background-clip, а не вид градиента.