Бесплатный генератор CSS-градиентов онлайн

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

linear-gradient: направленный градиент

Функция linear-gradient() принимает угол и следом точки: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). Угол 0deg направлен вверх, 90deg вправо, 180deg вниз. Без угла браузер идёт сверху вниз. Это самая частая запись для шапок, кнопок призыва к действию и баннеров секций.

radial-gradient: свечение и эллипс

Функция radial-gradient() начинается от точки (по умолчанию центра) и расходится кругом или эллипсом. Позиция начала пишется как at X% Y% : radial-gradient(circle at 50% 50%, …). Идеально для свечения за заголовком, hero-фона с акцентом на центр или мягкой синтетической тени. Инструмент даёт два ползунка X и Y, чтобы поставить начало с точностью до пикселя.

conic-gradient: вращение вокруг точки

Функция conic-gradient() вращается вокруг точки, как стрелки часов. Записывается как conic-gradient(from 90deg at 50% 50%, …) и позволяет создавать кольца, круговые шкалы, цветные границы или эффект призмы. Каждая точка занимает угловой сектор: расставив несколько цветов, вы рисуете CSS-круговую диаграмму без единой картинки.

Цветовые точки (color stops)

Каждая точка связывает цвет с позицией в процентах: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Одинаковые позиции у двух цветов образуют чёткий переход (жёсткая граница); далёкие позиции дают плавное затухание. Больше двух точек позволяют собирать многоколёрные палитры, полосы или имитации материалов (металл, перламутр, северное сияние).

Наложить градиент и предусмотреть запасной вариант

В сокращении background важен порядок: передний план идёт первым. Тёмная вуаль поверх фото пишется так: background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Всегда указывайте сплошной цвет как запасной вариант (background-color) для очень старых браузеров или на время загрузки изображения.

Лучшие практики производительности

CSS-градиент пересчитывается при каждом изменении размера: держите число точек в разумных пределах (2–5 достаточно в 90% случаев) и избегайте множественных наложений на очень больших площадях в мобильных устройствах. Отдавайте предпочтение значениям шестнадцатеричным или HSL и фиксируйте угол, как только дизайн утверждён, чтобы избежать микроскопических расхождений между браузерами.

Градиенты в фирменном стиле Volade

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