CSS Gradient Generator

Создавайте эффектные CSS-градиенты без всяких дизайнерских программ

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

Виды CSS-градиентов

Линейные градиенты переходят по прямой линии от одного цвета к другому. Угол задаёт направление: 0° — снизу вверх, 90° — слева направо, 180° — сверху вниз, 270° — справа налево. Самые распространённые углы в дизайне — 135° (по диагонали) и 90° (по горизонтали). Допустим любой угол от 0° до 360°.

CSS: linear-gradient(135deg, #667eea, #764ba2)

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

CSS: radial-gradient(circle, #667eea, #764ba2)

Поддержка градиентов в любом современном браузере

Линейные и радиальные градиенты поддерживаются во всех современных браузерах без каких-либо вендорных префиксов. Старые версии Safari и Chrome когда-то требовали префикс -webkit- для корректного отображения градиентов — это наследие ранних дней, когда синтаксис CSS-градиентов ещё стандартизировался, — но уже много лет ни один браузер массового использования этого не требует, так что простой, беспрефиксный синтаксис, который выдаёт этот генератор, работает везде без изменений.

Добавление дополнительных цветовых точек

Генератор использует два цвета, но CSS-градиенты поддерживают любое количество цветовых точек в любой позиции. Чтобы добавить третий цвет посередине:

linear-gradient(135deg, #667eea 0%, #ff6b6b 50%, #764ba2 100%)

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

linear-gradient(90deg, #000000 0%, #000000 50%, #ff0000 50%, #ff0000 100%)

Это создаёт резкое разделение вместо плавного градиента — полезно для определённых дизайнерских эффектов.

Популярные палитры градиентов

Несколько любимых многими сочетаний градиента:

• Океан: #2193b0 → #6dd5ed
• Закат: #FF512F → #DD2476
• Лес: #134E5E → #71B280
• Фиолетовая мечта: #667eea → #764ba2
• Огонь: #f7971e → #ffd200
• Ночное небо: #0f0c29 → #302b63 → #24243e

Использование градиентов в CSS

Сокращённое свойство background или свойство background-image принимают функции градиента напрямую:

.header {

background: linear-gradient(135deg, #667eea, #764ba2);

}

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

Сочетание градиентов с изображениями

CSS позволяет комбинировать градиент с фоновым изображением, используя несколько слоёв фона:

.hero {

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('photo.jpg') center/cover;

}

Это накладывает полупрозрачный тёмный градиент поверх изображения, улучшая читаемость текста в героических секциях (hero) сайта.

Как пользоваться генератором

Выберите два цвета с помощью выбора цвета, настройте ползунок угла, чтобы задать направление перехода, — и предпросмотр обновляется вживую, так что вы видите, как именно выглядит градиент, ещё до того, как использовать его где-либо. Когда результат устроит, скопируйте сгенерированный CSS-код одним кликом и вставьте его прямо в вашу таблицу стилей — здесь нет ни этапа экспорта, ни изображения для скачивания, ни какого-либо процесса сборки.

Почему CSS-градиенты лучше градиентов-изображений

До того как CSS-градиенты стали хорошо поддерживаться, дизайнерам приходилось экспортировать градиент как файл изображения PNG или JPEG, чтобы использовать его на сайте, — это добавляло лишний файл для загрузки, увеличивало вес страницы и выглядело размыто или полосато на экранах с высоким разрешением, если только изображение не было тщательно экспортировано в большом размере. CSS-градиент вычисляется самим браузером на том разрешении, которое требует экран, поэтому он всегда идеально чёткий, масштабируется до любого размера без дополнительного файла и может быть изменён мгновенно правкой нескольких символов кода вместо повторного экспорта изображения. Именно поэтому практически любой современный сайт использует CSS-градиенты, а не файлы изображений, для подобного эффекта.

Выбор цветов, которые хорошо сочетаются

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

Градиенты на тексте и других элементах

Помимо простых фонов, градиенты можно применять к самому тексту, используя сочетание background-clip: text и прозрачного цвета текста, — популярный эффект для заголовков и логотипов, которым нужна яркая, привлекающая внимание обработка без обращения к файлу изображения. Тот же базовый синтаксис градиента работает и на границах, и его можно комбинировать с CSS-масками для более сложных эффектов формы, хотя эти техники требуют чуть больше сопутствующего CSS, чем простой градиент фона. Получив понравившийся градиент в этом генераторе, стоит помнить, что те же самые цветовые точки можно повторно использовать в нескольких таких разных эффектах ради визуально целостного дизайна.

Приватно и мгновенно

Всё работает полностью в вашем браузере, поэтому предпросмотр обновляется мгновенно при изменении цветов или угла, а всё, что касается спроектированного вами градиента, никогда не отправляется на сервер, не логируется и не передаётся кому-либо ещё.