Бесплатный конвертер

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

Визуально создавайте CSS-градиенты с живым предпросмотром. Создавайте линейные, радиальные и конические градиенты с пользовательскими точками цвета — бесплатно на стороне клиента.

Живой Предпросмотр
Вывод CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Угол (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Об этом инструменте

Создавайте красивые линейные и радиальные градиенты CSS с помощью визуального редактора. Выбирайте цвета, настраивайте остановки, меняйте направление или угол и просматривайте обновления предварительного просмотра в реальном времени. Скопируйте сгенерированный код CSS, включая префиксы поставщиков для старых браузеров, и вставьте его прямо в таблицу стилей.

Как использовать

  1. Выберите тип градиента: линейный или радиальный.
  2. Добавьте цветовые точки, щелкнув полосу градиента и выбрав цвета.
  3. Отрегулируйте угол градиента (линейный) или положение (радиальный) с помощью элементов управления.
  4. Скопируйте сгенерированный код CSS с панели вывода.

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

Работают ли градиенты CSS во всех браузерах?
Современные градиенты CSS (линейный градиент, радиальный градиент) поддерживаются во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. Инструмент может дополнительно генерировать префиксы -webkit- для старых версий браузера.
Могу ли я создавать многоцветные градиенты?
Да. Добавьте столько цветовых остановок, сколько вам нужно. Вы также можете настроить положение каждой остановки, чтобы контролировать смешивание цветов. Это позволяет создавать сложные градиенты радуги, заката или фирменные градиенты.
В чем разница между линейными и радиальными градиентами?
Линейные градиенты переносят цвета по прямой линии (сверху вниз, слева направо, по диагонали или под любым углом). Радиальные градиенты переносят цвета наружу от центральной точки в круглой или эллиптической форме.
Могу ли я использовать градиент в качестве фона для текста?
Да. Используйте background-clip: text с -webkit-text-fill-color: Transparent, чтобы применить градиент к тексту. Сгенерированный CSS предоставляет определение градиента — объедините его с этими свойствами для текста градиента.