🌈

генератор градиентов CSS

Создавайте и предпросматривайте линейные и радиальные градиенты CSS. Копируйте готовый к использованию CSS-код.

Инструменты дизайна Работает локально Данные не отправляются
CSS-градиент линейный радиальный дизайн
Тип градиента
Направление
●
Цветовые остановки
Вывод CSS

Что такое генератор градиентов CSS?

Создавайте и просматривайте линейные и радиальные градиенты CSS. Добавляйте цветовые остановки, выбирайте направление и мгновенно копируйте готовый к использованию код CSS.

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

  1. Выберите линейный или радиальный градиент.
  2. Добавляйте или настраивайте цветовые остановки, пока переход не станет нужным.
  3. Тонко настройте угол, положение или разброс в предпросмотре в реальном времени.
  4. Скопируйте сгенерированный CSS, когда будете готовы использовать его в проекте.

Похожие инструменты

🎨
генератор палитры
Создавайте комплементарные, аналогичные и триадные цветовые палитры
 🎨
выбор цвета
Преобразуйте цвета между HEX, RGB, HSL и CMYK
 ⚖️
проверка контраста WCAG
Проверяйте коэффициенты цветового контраста WCAG AA и AAA для доступности
Понимание градиентов CSS ▾
Пример
Ввод Линейный, 90°, остановки: #6366F1 → #8B5CF6
Результат background: linear-gradient(90deg, #6366F1, #8B5CF6);
Типичные сценарии использования
  • Создавайте градиенты для фона hero на маркетинговых страницах
  • Проверяйте настройки угла и остановок перед редактированием файлов CSS
  • Создавайте аккуратные фоны кнопок или карточек
  • Делитесь точным CSS градиента с разработчиками без ручного преобразования
Часто задаваемые вопросы
Нужны ли мне вендорные префиксы, например -webkit-linear-gradient?

Нет — все современные браузеры (Chrome, Firefox, Safari, Edge) поддерживают градиенты CSS без префиксов. Вендорные префиксы нужны только для очень старых браузеров (IE 9 и ниже).

Можно ли использовать прозрачные цветовые остановки?

Да — используйте цвета rgba() или hsla() со значением альфа-канала 0, чтобы создавать переходы к прозрачности. Например: rgba(99, 102, 241, 0) плавно делает индиго невидимым.

Можно ли использовать этот градиент для текста?

Да — скопируйте значение градиента и используйте его со свойствами CSS: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Каково максимальное количество цветовых остановок?

Этот инструмент поддерживает до 6 цветовых остановок. Сам CSS не имеет жёсткого ограничения — браузеры поддерживают градиенты с десятками остановок, хотя производительность может отличаться.