Генератор неоморфизма
Создавайте soft-UI эффект экструзии: двойные светлые и тёмные тени, 4 режима формы и полный контроль над светом, глубиной и мягкостью.
Совет: неоморфизм требует, чтобы фон элемента совпадал с фоном страницы — генератор настраивает оба за вас.
Как использовать генератор неоморфизма
- Выберите базовый цвет — soft UI лучше всего работает со светлыми, слегка приглушёнными цветами.
- Выберите направление источника света; тени падают на противоположную сторону.
- Настройте расстояние и размытие для глубины, а интенсивность — для контраста между светлой и тёмной тенями.
- Переключайтесь между формами Плоская, Вогнутая, Выпуклая и Нажатая для кнопок, карточек и полей ввода.
- Скопируйте CSS (пара background + box-shadow) или Tailwind класс в ваш проект.
Об этом генераторе неоморфизма
Неоморфизм (soft UI) заставляет элементы выглядеть выдавленными из фона, комбинируя две тени: тёмную с одной стороны и светлую подсветку с другой, при этом элемент заполнен тем же цветом, что и фон страницы. Результат — мягкий, тактильный, почти физический стиль интерфейса для карточек, кнопок и переключателей.
Этот генератор автоматически вычисляет светлый и тёмный цвета теней из вашего базового цвета и сочетает их с четырьмя режимами формы: плоская (классическая экструзия), вогнутая и выпуклая (градиентные заливки для кривых поверхностей) и нажатая (inset-тени для вдавленных состояний). Помните: фон элемента должен совпадать с фоном страницы, чтобы иллюзия работала — предпросмотр показывает оба вместе.
FAQ по неоморфизму
Почему неоморфизм не работает на моей странице?
Стиль зависит от слияния элемента с его фоном: элемент должен использовать тот же (или очень близкий) цвет фона, что и поверхность позади. Если фон вашей страницы отличается от выбранного базового цвета, обновите один из них — именно поэтому генератор красит сцену предпросмотра тем же цветом.
Какие цвета лучше всего подходят для soft UI?
Светлые, слегка ненасыщенные цвета (около 85–95% светлоты) работают лучше всего, потому что и более светлая подсветка, и более тёмная тень остаются видимыми. Чистый белый убивает подсветку; чистый чёрный убивает тень. Слайдер интенсивности контролирует, насколько два тона разбегаются от базового цвета.
В чём разница между вогнутым и выпуклым?
Оба добавляют тонкую линейную градиентную заливку поверх двойных теней. Выпуклый выпячивается к зрителю (светлее к источнику света), как приподнятая кнопка. Вогнутый изгибается внутрь, как неглубокое блюдце — полезно для лунок и полей ввода. Нажатый использует inset-тени для активного/вдавленного состояния.
Доступен ли неоморфизм?
Soft UI по своей природе низкоконтрастен, поэтому используйте его для декоративных контейнеров, а не критических элементов управления. Убедитесь, что текст и иконки соответствуют коэффициентам контраста WCAG, и рассмотрите добавление фокусной обводки для интерактивных элементов.
Как вычисляются светлый и тёмный цвета теней?
Генератор осветляет базовый цвет к белому для подсветки и затемняет к чёрному для тени, масштабируясь слайдером интенсивности. Это сохраняет оба тона в одном семействе оттенков, что и делает эффект мягким и естественным.