Генерируйте потрясающие CSS-эффекты быстро и наглядно.
Интерактивная песочница современного CSS: стеклянный эффект, многослойные тени, градиенты с интерполяцией в OKLab, органичные скругления и фильтры — сгенерированный код всегда перед глазами.
CSS Конструктор
Изменяйте параметры слева, чтобы видеть результат в реальном времени.
КнопкаКолесо мыши масштабирует под курсором, перетаскивание сдвигает, удерживайте B для сравнения с элементом без стилей.
PNG заново рисуется на canvas из тех же значений — это не скриншот, поэтому он остаётся чётким в любом размере.
.glass-card {
background: #ffffff24;
backdrop-filter: blur(16px) saturate(140%) brightness(105%);
-webkit-backdrop-filter: blur(16px) saturate(140%) brightness(105%);
border: 1px solid #ffffff38;
border-radius: 24px;
box-shadow: 0 8px 32px 0 #00000036, inset 0 1px 0 0 #ffffff38;
}Вставить готовый CSS+
Вставьте box-shadow, градиент, border-radius или filter — хоть целое правило — и элементы управления настроятся сами.
Как это работает
Выберите эффект
Стекло, многослойная тень, градиент, скругление или фильтр — пять генераторов и один предпросмотр.
Настройте
Тяните ползунок или впишите точное число. Любое изменение отменяется одним шагом.
Проверьте
Масштабируйте под курсором, сдвигайте вид и удерживайте кнопку, чтобы сравнить с элементом без стилей.
Заберите
Скопируйте CSS, Tailwind, SCSS или переменные, поделитесь ссылкой или отправьте PNG сразу в другой инструмент.
Многослойные тени
Складывайте столько слоёв, сколько требует настоящая высота, отключайте любой из них и дублируйте тот, что уже удался.
Современные цветовые пространства
Интерполируйте градиенты в OKLab или OKLCH, чтобы убрать полосы sRGB, и выводите любое значение как HEX, RGB, HSL или oklch().
Вставьте свой CSS обратно
Бросьте сюда готовое правило — ползунки встанут на его значения, вместо того чтобы собирать всё на глаз.
Органичные углы
Border-radius по восьми точкам с живой сеткой пресетов и полем для той самой формы, которая нужна.
История, которая ничего не весит
Шестьдесят шагов отмены хранят числа, а не пиксели, поэтому память остаётся свободной.
Сразу в следующий инструмент
Отрисуйте поверхность в PNG и отправьте в CompressSnap, CropSnap или MemeBolt, минуя папку загрузок.
Ничего не покидает браузер
Без загрузок на сервер, без аккаунта, без обращений к бэкенду. Ваше изображение не выходит за пределы вкладки.
Сделано под клавиатуру
Цифры 1–5 меняют генератор, Ctrl+Z отменяет, Alt делает шаг ползунка в десять раз мельче.
Генерируйте потрясающие CSS-эффекты быстро и наглядно.
Проектировать современные стили — не значит угадывать числа в текстовом редакторе. Пять генераторов делят один живой предпросмотр: настраивайте ползунками или точными значениями, сравнивайте с элементом без стилей, отменяйте что угодно и забирайте результат кодом, ссылкой или картинкой PNG.
100% обработка в браузере
Все вычисления происходят прямо на вашем устройстве, обеспечивая мгновенную скорость.
Идеальный инструмент CSS для веб-разработчиков и дизайнеров интерфейсов.
Быстрая стилизация кнопок, карточек, фонов страниц и модальных окон.
Ваш код создается на вашем компьютере, гарантируя безопасность дизайна.
Часто задаваемые вопросы
QЭто бесплатно?+
Да, инструмент полностью бесплатный.
QЕсть поддержка Tailwind?+
Да, мы генерируем удобные классы Tailwind с произвольными значениями.
QЧто такое Glassmorphism?+
Glassmorphism — это UI-тренд, имитирующий матовое стекло. Используется размытие backdrop-filter и полупрозрачные фоны для элегантного наложения элементов на цветные фоны.
QРаботает ли это на мобильных устройствах?+
Безусловно. Макет оптимизирован для смартфонов, планшетов и настольных компьютеров, чтобы вы могли работать в дороге.
QМожно вставить правило CSS, которое у меня уже есть?+
Да. Откройте «Вставить готовый CSS» под панелью кода и вставьте box-shadow, градиент, border-radius или filter — целое правило тоже подойдёт. Элементы управления встанут на эти значения, и дальше вы правите их обычным образом.
QЧто меняет интерполяция в OKLab или OKLCH?+
Интерполяция в sRGB протаскивает середину градиента через серую, грязноватую зону. OKLab и OKLCH сохраняют воспринимаемую светлоту ровной, поэтому переход из фиолетового в розовый остаётся сочным по всей длине. В сгенерированный CSS попадает стандартный синтаксис «in oklab».
QЭкспорт в PNG — это скриншот?+
Нет. Картинка заново рисуется на canvas по тем же числам, что и предпросмотр, поэтому она чёткая и в 1600×900, и в 1080×1920, и её можно отправить в другой инструмент oLoveTools, не скачивая.
QЗагружается ли что-нибудь, когда я добавляю своё изображение?+
Нет. Изображение декодируется во вкладке и служит только фоном предпросмотра. Даже извлечение палитры работает на вашей машине — и только когда вы нажимаете кнопку.