Генератор неоморфізму

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

Неоморфізм створює глибину, розміщуючи елемент на поверхні того самого базового кольору й додаючи дві протилежні тіні: світлу та темну. Завдяки цьому елементи керування здаються злегка піднятими над сторінкою або вдавленими в неї. Цей генератор неоморфізму дає змогу налаштувати найважливіші параметри: колір тла, відстань тіні, розмиття, інтенсивність, радіус заокруглення та форму поверхні. Попередній перегляд оновлюється миттєво, тож ви бачите, як дрібні зміни впливають на ілюзію м'якого освітлення.

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

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

Відстань визначає, наскільки далеко світла й темна тіні відходять від елемента. Більші відстані роблять компонент більш піднятим, але можуть виглядати нереалістично, якщо розмиття надто мале. Розмиття пом'якшує край тіні, що є ключовим для гладкого вигляду soft UI. Інтенсивність керує непрозорістю: низькі значення тонкі й спокійні, а високі створюють виразніший ефект рельєфу. Збалансований дизайн зазвичай поєднує середнє розмиття, помірну відстань і достатню інтенсивність, щоб показати форму, не перевантажуючи сусідній вміст.

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

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