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

Создавайте красивые градиенты с живым предпросмотром и готовым для копирования CSS или Tailwind кодом

Живой предпросмотр

CSS & Tailwind

Интерактивный редактор

Живой предпросмотр

Смотрите ваш градиент в реальном времени

Интерактивная цветовая панель - Кликните для добавления, перетащите для перемещения

💡 Кликните где угодно, чтобы добавить цветовую остановку, перетащите существующие остановки для изменения позиции, кликните на остановку для редактирования

Настройки

Тип

Направление

Сгенерированный код

Скопируйте код для использования в вашем проекте

Свойство фона

background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

CSS-класс

.gradient {
  background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);
}