Генератор неоморфизма в CSS
Настройте цвет фона, смещение, размытие и интенсивность, чтобы создать эффект неоморфизма (мягкая тень, имитирующая рельеф), и получите соответствующий CSS-код с предпросмотром в реальном времени. Все вычисления выполняются целиком в вашем браузере.
Как это работает
Неоморфизм создаёт иллюзию того, что элемент слегка выступает из фона или вдавлен в него, благодаря двум противоположным теням того же цвета, что и фон: более светлой — вверху слева, более тёмной — внизу справа. Инструмент вычисляет эти два оттенка по выбранному цвету фона и в реальном времени составляет соответствующее свойство box-shadow.
Почему у обеих теней должен быть один и тот же базовый цвет?
Эффект неоморфизма строится на изменении яркости одного и того же цвета (фона), а не на контрастных цветах, как в обычной тени. Именно близость оттенков создаёт мягкое «вылепленное» впечатление, характерное для этого стиля, в отличие от традиционной падающей тени.
К каким элементам применять этот эффект?
Неоморфизм хорошо подходит для кнопок, карточек, полей форм и иконок на однотонном светлом или тёмном фоне. На фоне с изображением или градиентом он читается плохо, а из-за недостатка контраста иногда создаёт проблемы с доступностью — проверьте это, прежде чем использовать его повсеместно.
Никакие данные не отправляются на сервер: тень составляется целиком в вашем браузере.