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

Что такое Генератор CSS-неоморфизма?

Генератор CSS-неоморфизма — это бесплатный визуальный инструмент для создания вида Soft-UI (неоморфизм), при котором элементы кажутся выступающими из поверхности или вдавленными в неё за счёт двух смещённых теней одного оттенка. Он создан для UI-дизайнеров и фронтенд-разработчиков, которым нужна эта тонкая, осязаемая глубина без ручной подгонки парных box-shadow. Задайте базовый цвет с помощью пипетки или поля для шестнадцатеричного значения, переключайте Форму между Плоской, Вогнутой и Выпуклой и регулируйте Расстояние (насколько смещены тени), Интенсивность (силу контраста света и тени), Размытие (мягкость) и Радиус (скругление углов). Инструмент выводит из вашего базового цвета более светлый блик и более тёмную тень и объединяет их — при необходимости накладывая лёгкий градиент для вогнутой и выпуклой форм — в одно правило CSS, которое показывается вживую на подходящем фоне и выдаётся как код для копирования.

Как пользоваться Генератор CSS-неоморфизма

1. Выберите базовый цвет поверхности с помощью образца или введя шестнадцатеричное значение, например #e0e5ec.
2. Выберите Форму: Плоская — для приподнятой панели, Вогнутая — для вдавленной выемки, Выпуклая — для куполообразного бугорка.
3. Задайте Расстояние, чтобы отодвинуть светлую и тёмную тени дальше наружу для более глубокого выступа.
4. Настройте Интенсивность, чтобы сделать контраст блика и тени сильнее или мягче.
5. Отрегулируйте Размытие для более мягких или резких краёв и Радиус для скругления углов.
6. Проверьте живой предпросмотр, затем скопируйте сгенерированный CSS неоморфизма в свою таблицу стилей.

Примеры

цвет #e0e5ec, форма Плоская, расстояние 12, интенсивность 15, размытие 24, радиус 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

цвет #e0e5ec, форма Вогнутая, расстояние 8, интенсивность 15, размытие 16, радиус 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

цвет #3a3f47, форма Выпуклая, расстояние 6, интенсивность 20, размытие 12, радиус 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Часто задаваемые вопросы

Что такое неоморфизм?

Неоморфизм (или soft UI) — это стиль, при котором элементы кажутся выступающими из одноцветной поверхности или вдавленными в неё за счёт двух смещённых box-shadow одного оттенка: более светлой сверху слева и более тёмной снизу справа. Этот инструмент выводит обе тени из вашего базового цвета, поэтому они всегда сочетаются с поверхностью.

В чём разница между Плоской, Вогнутой и Выпуклой?

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

Как работают Расстояние, Интенсивность, Размытие и Радиус?

Расстояние — это смещение обеих теней в пикселях: чем больше значение, тем дальше элемент от поверхности. Интенсивность определяет, насколько светлее и темнее два цвета тени по сравнению с базовым. Размытие смягчает края тени, а Радиус скругляет углы. CSS обновляется вживую при изменении любого из них.

Какой цвет использовать для фона?

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

Загружаются ли мои данные куда-либо?

Нет. Генератор работает полностью в вашем браузере на JavaScript — ваш цвет и настройки никогда не отправляются на сервер, поэтому он работает конфиденциально и даже офлайн после загрузки страницы.