Генератор неоморфизма

Генерируйте тени soft UI

Неоморфизм создаёт глубину, помещая элемент на поверхность того же базового цвета и добавляя две противоположные тени: светлую и тёмную. Благодаря этому элементы управления выглядят слегка приподнятыми над страницей или вдавленными в неё. Этот генератор неоморфизма позволяет настроить самые важные параметры: цвет фона, расстояние тени, размытие, интенсивность, радиус скругления и форму поверхности. Предпросмотр обновляется мгновенно, поэтому вы сразу видите, как небольшие изменения влияют на иллюзию мягкого освещения.

Сгенерированный CSS включает фон, радиус скругления и двойной box-shadow. Плоский режим сохраняет однородный цвет поверхности, а вогнутый и выпуклый режимы добавляют едва заметный градиент, намекающий на углубление или скруглённое возвышение. Поскольку неоморфные эффекты сильно зависят от цвета страницы, копируйте и фон сцены, и стили компонента, если хотите точно воспроизвести предпросмотр в другом проекте.

Выбор расстояния, размытия и интенсивности

Расстояние определяет, насколько далеко светлая и тёмная тени отходят от элемента. Большие расстояния делают компонент более приподнятым, но могут выглядеть нереалистично при слишком малом размытии. Размытие смягчает край тени, что необходимо для гладкого вида soft UI. Интенсивность управляет непрозрачностью: низкие значения тонкие и спокойные, а высокие создают более выраженный эффект рельефа. Сбалансированный дизайн обычно сочетает среднее размытие, умеренное расстояние и достаточную интенсивность, чтобы показать форму, не подавляя соседний контент.

Доступность и реальное применение в интерфейсах

Неоморфизм лучше всего работает на декоративных карточках, переключателях, панелях управления и кнопках-иконках, у которых есть понятные подписи. Не полагайтесь только на тень для передачи состояния: приподнятые поверхности с низким контрастом трудно заметить многим пользователям. Добавьте заметные контуры фокуса, активные состояния и контраст текста, отвечающий требованиям доступности. После копирования CSS проверьте его на реальном фоне страницы и в реальном размере компонента. Мягкая тень, которая элегантно выглядит отдельно, в плотном интерфейсе может потребовать более сильного контраста или более простого радиуса.