Генератор CSS glassmorphism
Створюйте готовий CSS для панелей морозного скла або м'яких нейроморфних поверхонь за допомогою кількох повзунків.
Генератор CSS glassmorphism
Створюйте готовий CSS для панелі морозного скла або м'якої нейроморфної поверхні, не вводячи жодних значень вручну. Виберіть glassmorphism для напівпрозорої картки, яка розмиває те, що знаходиться позаду — ефект, що використовується на сучасних панелях управління, формах входу та модальних вікнах — або neumorphism для поверхні, що виглядає так, як ніби вона сформована з того ж матеріалу, що й її фон, використовуючи пару протилежних м'яких тіней замість прозорості.
Опції безпосередньо відповідають властивостям, які записує інструмент. У режимі скла прозорість поверхні та сила розмиття контролюють альфа-фон та розмиття backdrop-filter, тоді як товщина границі та яскравість границі встановлюють тонкий напівпрозорий край, який зберігає читабельність панелі на тлі завантаженого фону. Відстань та м'якість тіні формують падаючу тінь під панеллю, а перемикач форми переводить її на вбудовану тінь для утопленого виду. У режимі neumorphism ті ж самі значення відстані та м'якості тіні створюють світлу та темну тіні, обчислені з кольору вашої поверхні, піднята або натиснута залежно від вибраної форми. Скруглення кутів та варіант темного режиму застосовуються до обох стилів.
Оскільки морозна або м'яко затінена поверхня може опинитися на напівтоні, який важко читати чорним або білим текстом, інструмент перевіряє результуючий контраст та додає короткий попереджувальний коментар вище CSS, коли жоден колір тексту не буде комфортно сидіти вище WCAG AA — підказка відрегулювати колір поверхні або прозорість замість вгадування.
Все працює локально у вашому браузері під час переміщення повзунків — жодних інструментів проектування, жодних облікових записів і нічого не надсилається на сервер. Скопіюйте CSS прямо у вашу таблицю стилів, завантажте його як файл .txt або надішліть вихід назад у введення, щоб продовжити його налаштування.