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