Как пользоваться: Генератор CSS-градиентов
- Выберите пресет или начните с градиента по умолчанию.
- Выберите Linear, Radial или Conic и задайте угол, форму или положение.
- Измените цветовые стопы: кликните по полосе, чтобы добавить стоп, перетаскивайте маркеры, чтобы переместить его, или введите точные цвета и позиции в списке.
- При желании выберите интерполяцию OKLab/OKLCH для более плавных переходов и нажмите Copy CSS.
Что такое CSS-градиент?
CSS-градиент — это изображение, которое создаёт браузер и которое плавно переходит между двумя или более цветами. Поскольку это <image>, его используют в background, background-image, border-image или mask-image, но не в background-color. Градиенты не требуют HTTP-запроса, без размытия масштабируются до любого размера и могут быть анимированы или наслоены.
Линейные, радиальные и конические градиенты
| Тип | Пример | Типичное применение |
|---|---|---|
| Линейный | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Фоны hero-секций, кнопки, наложения на изображения |
| Радиальный | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Эффект прожектора, свечение, виньетки |
| Конический | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Цветовые круги, круговые диаграммы, лоадеры |
В линейном градиенте 0deg направлен вверх, а 90deg — вправо (так же, как to right). Углы конического градиента отсчитываются от верхней точки по часовой стрелке.
Цветовые стопы и жёсткие границы
Каждый стоп — это цвет и необязательная позиция. Если два стопа имеют одинаковую позицию, переход превращается в жёсткую границу. Так создаются полосы или пресет Круговая диаграмма: #4f46e5 0% 40%, #22c55e 40% 75%. Чтобы плавно растворить содержимое в фоне страницы, завершите градиент прозрачной версией того же цвета (например, #00000000), это избавит от грязной серой полосы.
Более плавные градиенты с OKLab и OKLCH
По умолчанию браузеры интерполируют цвета в sRGB, поэтому переход от синего к жёлтому проходит через тусклый серый. CSS Color 4 позволяет выбрать цветовое пространство: linear-gradient(90deg in oklab, blue, yellow) остаётся ярким и ровным, а in oklch проходит по цветовому кругу. Генератор сначала выводит обычное объявление в sRGB, а затем интерполированную версию, поэтому браузеры, не понимающие новый синтаксис, просто игнорируют последнюю строку.
Использование градиентов в Webflow
В панели стилей Webflow есть встроенные редакторы линейных и радиальных градиентов в разделе Backgrounds. Скопируйте в них угол и цвета стопов из этого инструмента. Для всего, что панель не поддерживает, например конических градиентов или интерполяции in oklch, вставьте CSS в блок <style> внутри элемента Embed или в пользовательский код страницы и укажите свой класс. Нужны подходящие тени? Попробуйте генератор box-shadow, а текст поверх градиента проверьте с помощью проверки контраста.
Также ищут как: linear-gradient, radial-gradient, conic-gradient, цветовые стопы градиента, генератор градиентов онлайн, градиент oklch, градиент webflow.
Инструменты, которые хорошо сочетаются с Генератор CSS-градиентов
- Генератор SVG-узоров — Добавьте разделам и карточкам тонкую текстуру с помощью бесшовных SVG-узоров: точки, сетки, диагональные линии, зигзаги, волны, плюсы, шахматки, круги, треугольники и другие.
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- SVG в CSS конвертер — Вставьте SVG и получите компактный URL-закодированный data URI, а также готовые правила background-image и перекрашиваемые mask-image.
- Генератор OG-картинок — За несколько секунд создайте красивое превью ссылки для Facebook, LinkedIn, X, Slack и WhatsApp: выберите шаблон, введите заголовок, добавьте логотип, затем скачайте PNG и готовые мета-теги.
Часто задаваемые вопросы
Как сделать градиент прозрачным?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Переход к тому же цвету с нулевой прозрачностью позволяет избежать серой полосы, которая может появиться при использовании ключевого слова transparent в старых браузерах.Почему градиент в середине грязный или серый?
Можно ли применить градиент к тексту?
background-clip: text; -webkit-background-clip: text; color: transparent;. Оставьте сплошной цвет color как запасной вариант для читаемости и проверьте контраст с фоном страницы.Почему CSS сначала включает сплошной цвет фона?
Как анимировать CSS-градиент?
background-position у увеличенного градиента или зарегистрировать пользовательские свойства через @property и анимировать цвета стопов или угол.