Как пользоваться
- Выберите линейный, радиальный или конический градиент, затем задайте угол или положение центра.
- Для каждого стопа задайте цвет, непрозрачность и положение. Можно добавить до шести стопов или удалить ненужные.
- Проверьте результат в предпросмотре, затем скопируйте строку CSS в таблицу стилей.
Как это работает
Результат — стандартное CSS-объявление background. Линейные градиенты строятся вдоль заданного угла: 0deg — снизу вверх, 90deg — слева направо, 180deg — сверху вниз. Радиальные градиенты расходятся из центральной точки в форме круга или эллипса, вписанного в блок. Конические градиенты огибают центральную точку, начиная с выбранного угла; они подходят для эффектов в виде круговой диаграммы и цветового круга.
Стопы перечисляются в порядке их расположения, поэтому их можно свободно перетаскивать. Стоп с уменьшенной непрозрачностью задаётся через rgba(), и сквозь него виден фон. Два стопа в одной позиции образуют резкую границу без перехода — так создаются полосы.
Все три функции градиента работают во всех современных браузерах. По умолчанию градиенты смешиваются в цветовом пространстве sRGB, поэтому между дополнительными цветами (например, синим и жёлтым) оттенок может выглядеть немного серым. Этого можно избежать, добавив между ними стоп с более ярким цветом.
Примеры
Ненавязчивый фон для заголовка
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) создаёт плавный переход сверху вниз, на фоне которого хорошо читается тёмный текст.
Полосы с резкими границами
Используйте четыре стопа: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Два стопа в позиции 50% стыкуются без перехода, образуя две сплошные половины.
Эффект светового пятна
Радиальный градиент (circle at top left) от rgba(255, 255, 255, 0.6) до rgba(255, 255, 255, 0), наложенный на цветной фон, создаёт мягкое световое пятно в углу.
Часто задаваемые вопросы
В каком направлении идёт градиент при 0deg?
В CSS угол 0deg направлен вверх, поэтому градиент начинается снизу и заканчивается сверху. Угол 90deg задаёт направление слева направо. Это отличается от некоторых приложений для дизайна, где 0° обычно означает направление слева направо.
Можно ли применить градиент к тексту?
Да: задайте градиент фоном, затем добавьте background-clip: text и color: transparent. Убедитесь, что текст остаётся читаемым на фоне страницы в любой точке градиента.
Нужны ли вендорные префиксы, например -webkit-linear-gradient?
Нет. Современные браузеры поддерживают синтаксис без префиксов. Префиксы нужны только для браузеров, выпущенных много лет назад.
Конфиденциальность
Всё создаётся в вашем браузере. Цвета и настройки не отправляются и не сохраняются.