Неоморфна тінь CSS — код із двох шарів
Візуальне створення коду CSS box-shadow: повзунки для зсуву, розмиття, розтягування, кольору з прозорістю, режиму всередину та до чотирьох шарів із живим попереднім переглядом.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор із уже створеною класичною неоморфною парою: світлий шар зі зсувом −8px/−8px майже білого кольору та темний шар зі зсувом 8px/8px приглушеного сіро-синього, обидва з розмиттям 16px. Перемикайтеся між двома шарами у списку шарів, щоб налаштовувати кожен бік незалежно.
Неоморфізм (soft UI) — це рельєфний стиль, пік популярності якого припав приблизно на 2020 рік: елементи виглядають витиснутими з фону, а не такими, що пливуть над ним. Чесно кажучи, він має реальні компроміси — ефект працює лише тоді, коли фон елемента збігається з фоном сторінки, а низькоконтрастні краї можуть погіршити доступність — тому більшість команд тепер використовують його як акцент, а не як цілу дизайн-мову.
Якщо стиль підходить вашому проекту, це двокомпонентне оголошення є канонічною відправною точкою: скопіюйте CSS, встановіть для фону елемента та сторінки однаковий м’який сірий колір і додайте відповідний border-radius. Усе працює локально у вашому браузері.