Инструменты дизайна, которые пишут CSS за вас.
Визуальные конструкторы градиентов, теней, border-radius и favicon: скопируйте CSS или скачайте файл, когда результат вас устроит. Всё в вашем браузере, ничего не загружается.
Инструменты дизайна
Генератор CSS-градиентов
Создавайте линейные или радиальные градиенты визуально, копируйте CSS.
Открыть инструментГенератор box-shadow
Создавайте одиночные или многослойные тени визуально, копируйте CSS.
Открыть инструментГенератор border-radius
Настройте border-radius для каждого угла визуально, копируйте CSS.
Открыть инструментГенератор фавиконок
Загрузите изображение и получите favicon во всех нужных размерах.
Открыть инструментЭкстрактор цветовой палитры
Извлеките доминирующие цвета из любого изображения.
Открыть инструментПроверка контраста
Коэффициент контрастности WCAG с результатом AA/AAA.
Открыть инструментКонвертер цветов
HEX, RGB, HSL и CMYK, синхронно и в реальном времени.
Открыть инструментГенератор CSS clamp()
Задайте минимальный и максимальный размер — получите гибкое значение clamp(), которое масштабируется под вьюпорт.
Открыть инструментГенератор CSS-плавности (cubic-bezier)
Перетащите два маркера, чтобы задать собственную кривую плавности, скопируйте значение cubic-bezier().
Открыть инструментГенератор CSS-фильтров
Загрузите изображение, подвиньте ползунки, скопируйте значение CSS filter.
Открыть инструментГенератор CSS-паттернов
Создайте замощаемый фоновый узор на чистых CSS-градиентах — без файлов изображений.
Открыть инструментГенератор SVG-блобов
Сгенерируйте случайную органическую форму-блоб, настройте случайность и число точек, скопируйте или скачайте.
Открыть инструментГенератор шумовых текстур
Сгенерируйте зернистую текстуру с настраиваемой плотностью, прозрачностью и цветом, скачайте или скопируйте как CSS.
Открыть инструментГенератор теней Tailwind
Постройте многослойную тень визуально — получите класс Tailwind shadow-[...] и исходный CSS.
Открыть инструмент