Генератор неоморфизма
Создавайте мягкие выпуклые неоморфные UI-поверхности с двойными тенями и копируйте CSS.
—
Цвет фона совпадает с цветом элемента — именно это создаёт мягкий, выпуклый неоморфный эффект.
По умолчанию светлая и тёмная тени выводятся из базового цвета. Включите, чтобы задать их вручную.
О Генератор неоморфизма
Генератор неоморфизма создаёт мягкий, «выдавленный» эффект «soft UI»: элемент выглядит так, будто он выдавлен из поверхности за ним или вдавлен в неё. Выберите один базовый цвет, и инструмент выведет всё остальное сам, потому что эффект работает только тогда, когда элемент и его фон имеют одинаковый цвет, а глубина создаётся исключительно двумя противоположными box-shadow.
Ползунки управляют геометрией: размер, радиус скругления, расстояние теней, их интенсивность и размытие. Четыре режима формы — flat, concave, convex и pressed — меняют внутренний градиент и направление тени, а выбор источника света перемещает блик в любой из четырёх углов, чтобы элемент соответствовал освещению вашего дизайна.
По умолчанию светлый и тёмный цвета теней вычисляются из базового цвета, но ручной режим позволяет задать оба самостоятельно. Сгенерированный CSS — фон, радиус и двойной box-shadow — доступен в один клик.
Как использовать Генератор неоморфизма
- Выберите базовый цвет — он применяется и к элементу, и к холсту за ним.
- Выберите форму: flat, concave, convex или pressed.
- Задайте угол источника света, чтобы контролировать, куда падает блик.
- Настройте размер, радиус скругления, расстояние, интенсивность и размытие с помощью ползунков.
- Включите ручные цвета теней, если хотите переопределить вычисленные светлый и тёмный тона.
- Скопируйте CSS и вставьте его в свой элемент.