Генератор CSS-градиентов – Линейные, радиальные и конические градиенты

Как использовать Генератор CSS-градиентов

1Выберите тип градиента — Линейный, Радиальный или Конический — или начните с готового пресета.

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

3Задайте угол (или форму для радиальных градиентов) и добавьте до восьми цветовых точек.

4Скопируйте CSS-код и вставьте его в свою таблицу стилей.

Создавайте CSS-градиенты визуально

Градиенты придают глубину и цвет кнопкам, первым экранам, карточкам и фонам без единого файла изображения. Однако писать их вручную — значит угадывать углы и проценты, постоянно перезагружая страницу. Этот генератор CSS-градиентов позволяет настраивать градиент визуально с предпросмотром в реальном времени. На выходе вы получаете чистый, готовый к копированию CSS-код, который работает во всех современных браузерах.

Возможности

Три типа градиента: линейный, радиальный (круг или эллипс) и конический.
До восьми контрольных точек цвета с возможностью перетаскивания.
Ползунок угла наклона для линейных и конических градиентов.
Пресеты и кнопка случайного выбора для быстрого поиска идей.
Резервный сплошной цвет уже включен в CSS-код.
Копирование кода в один клик.

Как использовать CSS

Вставьте код в CSS-правило элемента, который нужно стилизовать:

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

В CSS градиенты ведут себя как изображения, поэтому их можно использовать в свойстве background-image, накладывать несколько градиентов друг на друга через запятую или комбинировать с фотографиями. Например, код background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); затемнит фоновую картинку, чтобы белый текст поверх нее оставался читабельным.

Советы по дизайну

Используйте мягкие переходы. Два соседних оттенка (от синего к фиолетовому, от оранжевого к розовому) смотрятся более плавно и современно, чем противоположные цвета.
Проверяйте контрастность. Если поверх градиента есть текст, убедитесь, что он хорошо читается на обоих краях — проверьте цвета с помощью Конвертера цветов, который показывает коэффициент контрастности.
Извлекайте цвета из фирменных изображений с помощью Определителя цвета по фото.
Придавайте объем карточкам и кнопкам с помощью Генератора теней CSS.

Частые вопросы

Зачем нужны две строки background в CSS?

Первая строка задает сплошной цвет фона для редких браузеров и почтовых клиентов, не поддерживающих градиенты. Браузеры с поддержкой градиентов используют вторую строку, которая переопределяет первую.

Что означают углы в линейном градиенте?

0° идет снизу вверх, 90° — слева направо, 180° — сверху вниз, а 270° — справа налево. Промежуточные значения задают диагональное направление: например, 135° — от левого верхнего угла к правому нижнему.

В чем разница между линейным, радиальным и коническим градиентами?

В линейном градиенте цвет меняется вдоль прямой линии. Радиальный градиент расходится от центра в виде круга или эллипса. Конический градиент закручивается вокруг центра, как цветовой круг или круговая диаграмма.

Нужны ли вендорные префиксы, такие как -webkit-?

Нет. Линейные и радиальные градиенты работают без префиксов во всех актуальных браузерах, а конические градиенты поддерживаются во всех современных браузерах, выпущенных с 2020 года.

Как сделать четкую границу вместо плавного перехода?

Укажите два цвета в одной и той же позиции. Например, красный на 50% и синий на 50% создадут резкое разделение ровно посередине.