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

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

Ниже генератор. Выберите тип, добавьте цвета, подвиньте ползунки — код обновится сразу. Галочка «Плавные переходы» включает современную интерполяцию OKLCH, которая убирает серую «грязь» между яркими цветами. Готовый градиент можно скопировать в CSS или скачать картинкой нужного размера — для обоев, сторис или обложки.

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

Линейный (linear-gradient) — цвета меняются вдоль прямой под заданным углом. Самый частый вариант: фоны, кнопки, обложки. Угол 0° — снизу вверх, 90° — слева направо, 180° — сверху вниз, 135° — классическая диагональ из левого верхнего угла.

Радиальный (radial-gradient) — цвета расходятся из точки кругом или эллипсом. Хорош для эффекта свечения, прожектора, мягкой подсветки за объектом. Центр можно сдвинуть в угол или к краю.

Конический (conic-gradient) — цвета идут по кругу вокруг центра, как стрелка часов. Из него получаются цветовые круги, диаграммы-«пончики» и эффектные переливы.

Как устроен код градиента

.block {
  background: #FF9A8B;                                   /* запасной цвет */
  background: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}

• Направление — угол в градусах (135deg) или словами: to right, to bottom left.
• Цвета — сколько угодно, в любом формате: HEX, rgb(), hsl(), oklch(), названия.
• Положение цвета — в процентах или пикселях. Без них цвета распределяются равномерно.

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

Резкая граница вместо плавного перехода. Если у двух соседних цветов одинаковое положение, переход будет резким. Так делают полосы:

background: linear-gradient(90deg, #00DD11 50%, #121314 50%);

Градиент поверх картинки. Полупрозрачный градиент затемняет фото, чтобы на нём читался текст:

background:
  linear-gradient(to top, rgb(0 0 0 / .7), transparent 60%),
  url('/cover.jpg') center / cover;

Почему градиенты бывают «грязными» и как это исправить

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

Современное решение — интерполяция в пространстве OKLCH. Оно устроено так, как видит человек: переход идёт по кругу оттенков, а светлота и насыщенность меняются равномерно. Серой середины нет.

background: linear-gradient(in oklch 90deg, #0066FF, #FFD000);

Такую запись понимают Chrome и Edge с версии 111, Safari с 16.2 и Firefox с 127 — то есть все актуальные браузеры с середины 2024 года. Старые браузеры строку с in oklch просто пропустят и возьмут предыдущую, поэтому генератор добавляет её третьей, после обычного градиента. В картинку PNG генератор тоже рисует переход по OKLCH — там совместимость не нужна.

Где пригодится картинка PNG

CSS-градиент работает только на сайте. Во всех остальных местах нужна обычная картинка, и генератор её сделает:

Все размеры для соцсетей собраны в отдельном справочнике — размеры картинок для соцсетей. А если картинка нужна в формате WebP для сайта — перегоните её через конвертер в WebP.

Советы по красивым градиентам

1. Соседние цвета. Самые приятные градиенты — между цветами, которые рядом на цветовом круге: розовый и оранжевый, синий и бирюзовый. Противоположные цвета дают эффектный, но более резкий переход.
2. Два-три цвета. Больше — и градиент превращается в радугу. Исключение — осознанные спектры и конические круги.
3. Разница в светлоте. Градиент между цветами одинаковой светлоты выглядит плоско. Сделайте один край светлее — появится объём.
4. Текст на градиенте. Проверяйте контраст в самой светлой точке градиента, а не в средней. Белый текст на градиенте от тёмно-синего к жёлтому в жёлтой части пропадёт.
5. Большие площади — мягче. Яркий градиент на весь экран утомляет. Для фонов берите близкие оттенки, для кнопок и акцентов — поярче.

Цвета для градиента удобно брать из готовых палитр: два-три соседних цвета любой палитры почти всегда дают гармоничный переход.

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

Как сделать градиентный текст?

Градиент задаётся фоном, а текст делается прозрачным и «вырезает» его:

.title {
  background: linear-gradient(90deg, #F093FB, #F5576C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Как сделать градиентную рамку?

Проще всего — через два фона: внутренний сплошной и внешний градиентный, с прозрачной рамкой:

.card {
  border: 3px solid transparent;
  background:
    linear-gradient(#121314, #121314) padding-box,
    linear-gradient(135deg, #00DD11, #3FB6FF) border-box;
  border-radius: 16px;
}

Можно ли анимировать CSS-градиент?

Напрямую цвета градиента плавно не анимируются. Работающий приём — сделать градиент больше блока (background-size: 200% 200%) и анимировать background-position. Современный способ — зарегистрировать цвет через @property и анимировать уже его.

Поддерживают ли браузеры конический градиент?

Да, conic-gradient работает во всех актуальных браузерах уже несколько лет. Для очень старых добавьте запасной сплошной цвет строкой выше — генератор делает это автоматически.

Градиент на сайте тормозит?

Нет. CSS-градиент рисуется браузером очень быстро и ничего не весит — в отличие от картинки, которую нужно скачать. Для фонов он почти всегда выгоднее изображения.

Как повернуть градиент?

Поменять угол: 90deg — слева направо, 180deg — сверху вниз. В генераторе это ползунок «Угол». Кнопка «Развернуть» меняет порядок цветов на обратный.

Что дальше

Если нужен один цвет, а не переход, — конвертер цветов переведёт его во все форматы и подберёт оттенки. А для фона-обоев с градиентом удобно сразу нарезать версии под разные экраны в инструменте изменения размера фото.