Генератор CSS Neumorphism

Проектируйте элементы мягкого UI с двойными внутренними/внешними тенями. Настройте базовый цвет, размытие и глубину — затем скопируйте CSS прямо в свой проект.

Базовый цвет

Размер элемента (px) 150

Скругление углов (px) 20

Размытие 20

Расстояние 10

Интенсивность 0.15

Форма

Сгенерированный CSS

Работает полностью в вашем браузере. Ничего не загружается.

Как это работает

STEP 1

Выберите настройки

Выберите базовый цвет и настройте ползунки размытия, расстояния и интенсивности.

STEP 2

Просмотрите результат

Наблюдайте, как neumorphic-элемент обновляется в реальном времени по мере изменения настроек.

STEP 3

Скопируйте CSS

Нажмите «Копировать CSS» и вставьте правило box-shadow прямо в свою таблицу стилей.