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

Q: Поддерживают ли браузеры linear-gradient?

Да, все современные браузеры поддерживают linear-gradient без префиксов.

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

Задайте градиент как фон и обрежьте его по тексту: background: linear-gradient(…); -webkit-background-clip: text; background-clip: text; color: transparent;.

Как превратить цвета фотографии в CSS-градиент linear-gradient: генерация в один клик, синтаксис, углы, точки остановки и примеры кода.

Инструкции · 26 октября 2026 г. · 2 мин чтения

Самый быстрый способ получить CSS-градиент из фото — загрузить снимок в генератор палитры: он извлечёт доминантные цвета и сразу соберёт строку background: linear-gradient(135deg, …), которую можно скопировать одной кнопкой. Дальше её можно вставить в любой CSS-селектор.

Готовый градиент за три шага

Загрузите фото в генератор.
Выберите, сколько цветов взять в градиент: 5–8.
Нажмите «Копировать CSS» и вставьте строку в стиль нужного блока.

Пример результата для фото заката:

.hero {
  background: linear-gradient(135deg, #DE7C56, #FA9B59, #FEE0A4, #867569, #4E4747, #1E1A1D);
}

Как устроен linear-gradient

background: linear-gradient(<угол>, <цвет> <позиция>, <цвет> <позиция>, …);

Угол задаёт направление: 0deg — снизу вверх, 90deg — слева направо, 135deg — по диагонали из левого верхнего угла. Вместо градусов можно писать to right, to bottom right.
Цвета — любые форматы: HEX, rgb(), hsl().
Позиции (необязательно) — где цвет достигает полной силы: #DE7C56 0%, #FEE0A4 60%, #1E1A1D 100%.

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

Берите соседние по яркости цвета

Градиент от светлого персикового к тёмно-графитовому через середину выглядит плавно. Если поставить рядом очень светлый и очень тёмный цвет без промежуточного, появится резкая «ступенька».

Не используйте все 8 цветов

Для фона чаще хватает 2–3 цветов. Возьмите из палитры самый заметный цвет и два соседних по тону — получится спокойный фон, на котором читается текст.

Добавьте затемнение под текстом

Если на градиент ложится белый текст, усилите контраст полупрозрачным слоем:

background:
  linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
  linear-gradient(135deg, #DE7C56, #4E4747);

Проверить читаемость поможет статья о контрасте по WCAG.

Другие виды градиентов

Тип	Синтаксис	Когда использовать
Линейный	`linear-gradient(90deg, …)`	Фоны, кнопки, полосы
Радиальный	`radial-gradient(circle, …)`	Свечение, виньетка
Конический	`conic-gradient(…)`	Диаграммы, цветовой круг

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

Поддерживают ли браузеры linear-gradient?

Да, все современные браузеры поддерживают linear-gradient без префиксов.

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

Задайте градиент как фон и обрежьте его по тексту: background: linear-gradient(…); -webkit-background-clip: text; background-clip: text; color: transparent;.

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

Да. Скопируйте HEX-коды из палитры и задайте их как точки Linear gradient в панели Fill.