Генератор неоморфізму
Поверхні soft UI з одного кольору — світла й темна тіні, чотири форми, регульовані глибина й напрямок світла.
Як працює генератор неоморфізму
Генеруйте CSS у стилі soft UI з одного кольору поверхні — тіні, градієнти й радіус — із живим переглядом.
Лише один колір
Оберіть колір поверхні — інструмент сам обчислить обидві тіні, темнішу й світлішу, тож елемент виглядає видавленим із фону, на якому лежить.
Чотири форми
Пласка лежить урівень із поверхнею, опукла випирає, увігнута западає (обидві — завдяки ледь помітному градієнту), а натиснута використовує внутрішні тіні для ефекту заглиблення.
Напрямок світла
Оберіть, з якого кута падає світло, — світла й темна тіні поміняються місцями, щоб пасувати до решти інтерфейсу.
Керування глибиною
Відстань, інтенсивність і розмиття визначають, наскільки високо здіймається елемент. Розмиття автоматично підлаштовується під відстань у природній пропорції, а потім його можна доналаштувати.
Часті запитання
Стиль soft UI, у якому елементи мають той самий колір, що й фон, а видавленими чи натиснутими виглядають лише завдяки парі світлої й темної тіней — без рамок і контрастних заливок.
Ілюзія працює, бо елемент і сторінка мають одну поверхню. Якщо кольори різні, елемент сприймається як звичайна картка з тінню, а не як видавлена форма.
Низький контраст — головна претензія до цього стилю. Використовуйте його для декоративних поверхонь і великих елементів керування, тримайте контраст тексту в межах WCAG і додавайте чіткі стани фокусу — не покладайтеся лише на тіні, щоб показати, що елемент інтерактивний.
Вони додають ледь помітний діагональний градієнт поверх тих самих тіней: опукла — від світлого до темного (випирає), увігнута — від темного до світлого (западає). Натиснута ж перевертає тіні всередину через inset.