Инструменты/Код & Разработка/Генератор CSS Градиентов

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

Генерируйте CSS код градиентов.

100% на устройстве · 0 загрузок

Цвет 1

Цвет 2

Тип градиента

Угол: 90°

background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);

01 · Без ограничений

Используйте сколько угодно — совершенно бесплатно.

02 · Приватно

Файлы не покидают ваше устройство; всё работает в браузере.

03 · Быстро

Обработка происходит локально и занимает секунды.

Как создать CSS-градиенты

Выберите цвета

Два и более цвета через визуальные пикеры.

Настройте тип и угол

Переключайтесь между линейным и радиальным, вращайте направление, двигайте стопы.

Скопируйте CSS-код

Заберите готовое свойство background и вставьте в вашу таблицу стилей.

Почему именно этот генератор градиентов?

✓Визуальное редактирование с живым предпросмотром

✓Линейный и радиальный с полным контролем угла

✓Чистый CSS для копипаста

✓Бесплатно, мгновенно, без регистрации

Часто задаваемые вопросы

Какие типы градиентов поддерживаются?+

Линейные под любым углом и радиальные от центральной точки — две рабочие лошадки, покрывающие практически весь дизайн интерфейсов.

Совместим ли сгенерированный CSS везде?+

Да — стандартный синтаксис linear-gradient() и radial-gradient() годами поддерживается всеми браузерами, префиксы не нужны.

Как сделать градиенты профессиональными?+

Держите соседние оттенки близко (синий к фиолетовому, а не синий к оранжевому), избегайте чисто чёрных/белых концов и рассмотрите тонкий угол вроде 135° вместо строго вниз.

Можно ли больше двух цветов?+

Да — добавляйте несколько цветовых стопов для многоцветных переходов в стиле рассвета. Предпросмотр обновляется вживую.