Генератор неоморфизма CSS
Создавайте мягкие выпуклые поверхности интерфейса.
Неоморфизм использует парные светлые и тёмные тени на совпадающем фоне, чтобы элементы выглядели мягко выпуклыми. Задайте фон, расстояние, интенсивность и скругление, затем скопируйте CSS.
Цвет поверхности
20px
60%
16px
background: #e0e5ec; border-radius: 16px; box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);
Как создать неоморфизм
- Выберите цвет фона; мягкие пастельные серые тона работают лучше всего.
- Выберите светлый или тёмный режим.
- Настройте расстояние, интенсивность и скругление ползунками.
- Скопируйте CSS и используйте на элементах с тем же цветом фона.
Часто задаваемые вопросы
Почему элемент должен совпадать по цвету с фоном?
Иллюзия зависит от слияния обеих теней с одним цветом поверхности, поэтому элемент и его контейнер должны совпадать.
В чём разница между светлым и тёмным режимом?
Тёмный режим использует тонкие белые и чёрные тени на тёмном фоне вместо классического светло-серого вида.
Неоморфизм доступен для пользователей?
Используйте с достаточным контрастом для текста и никогда не полагайтесь только на тень для обозначения интерактивности.