Skip to main content

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

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

180°360°
%
%
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Поделиться
📖

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

Step 1

Выберите цвета

Выберите цвета

Задайте цвета градиента

Step 2

Задайте направление

Задайте направление

Настройте направление и тип градиента

Step 3

Скопируйте

Скопируйте

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

Возможности

Визуальный редактор

Перетаскивание для настройки позиций цветов

Несколько типов

Поддержка линейных, радиальных и конических градиентов

Предустановки

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

FAQ

Поддерживаются линейные, радиальные и конические градиенты.

🔗Похожие инструменты

🎨
Инструменты для дизайна

Конвертер цветовых кодов

Конвертация между цветовыми кодами HEX, RGB и HSL. Используйте палитру цветов и предпросмотр в реальном времени для интуитивного выбора цвета.

🎨
Инструменты для дизайна

Палитра цветов

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

🎨
Инструменты для дизайна

Извлечение цветов из изображения

Автоматическое определение доминирующих цветов изображения и генерация цветовой палитры. Также можно нажать на любую точку изображения для выбора цвета.

🎯
Инструменты для дизайна

Определение среднего цвета изображения

Вычисление среднего цвета всего изображения или выделенной области. Полезно для подбора цветовых схем или фоновых цветов миниатюр.

🔲
Инструменты для дизайна

Генератор CSS Box Shadow

Визуально создавайте CSS box-shadow с помощью ползунков. Поддержка нескольких теней и внутренних теней.

Инструменты для дизайна

Генератор CSS Border Radius

Генерируйте CSS border-radius с индивидуальным управлением углами. Включает эллиптический радиус и популярные предустановки форм.