Генератор неоморфизма (soft UI) CSS
Выберите цвет фона: элемент использует тот же цвет, а тени вычисляются из него. Попробуйте все четыре формы.
Как пользоватьсяКнопки и карточки, выступающие из фона
Доступно на: 
Генератор неоморфизма (soft UI) CSS: для чего нужен
Неоморфизм, или soft UI, делает кнопки и карточки похожими на вылепленные из самого фона: светлая тень с одной стороны и тёмная с другой.
Выберите цвет, и генератор вычислит обе тени, с учётом размера, скругления, расстояния, размытия, интенсивности и направления света. Есть четыре формы: плоская, вогнутая и выпуклая (с тонким градиентом) и нажатая (внутренние тени). Страница объясняет, как быть с контрастом — слабым местом этого стиля.
Как пользоваться
- Выберите цвет фона.
- Настройте расстояние, размытие, интенсивность и свет.
- Выберите форму и скопируйте CSS.
Когда использовать
- Кнопки и карточки в панелях.
- Элементы управления плеера или приложения.
- Декоративные детали на посадочных страницах.
Частые вопросы
Как работает неоморфизм?
У элемента тот же цвет, что и у фона, и две тени: более светлая со стороны, откуда падает свет, и более тёмная с противоположной. Это создаёт впечатление рельефа, как будто элемент вылеплен из самого фона.
Доступен ли неоморфизм?
С осторожностью. Поскольку цвет элемента совпадает с фоном, его граница малоконтрастна и может пропасть для тех, у кого плохое зрение. Используйте для декоративных деталей и карточек, обеспечьте контраст текста и иконок и не полагайтесь только на рельеф, чтобы показать, что это кнопка.
Работает ли на тёмном фоне?
Работает, но эффект получается более тонким. На очень тёмных или очень светлых цветах тень с крайней стороны почти не видна; средние тона дают наиболее заметный результат.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.