Генератор на гласморфизъм за CSS ефекти на матово стъкло
Генераторът на гласморфизъм създава CSS стойности за ефекти на матово стъкло, включително оцветен цвят с алфа, фоново замъгляване, рамка, радиус и сянка. Коригирайте наличните опции, генерирайте стойности и ги прегледайте върху цветен градиентен преглед. Изходът включва декларацията backdrop-filter с префикс -webkit-, така че можете да копирате CSS стойностите във вашия проект.
Генераторът на гласморфизъм създава CSS стойности за ефекти на матово стъкло. Той обединява оцветен цвят с алфа, фоново замъгляване, светла рамка, радиус и сянка, след което показва резултата в преглед. Използвайте го, за да изследвате стъклена обработка и да копирате генерираните стойности за вашата работа.
Задайте наличните опции и генерирайте стек backdrop-filter. Прегледът е върху цветен градиент, за да виждате замъгляването в контекст, а генерираният CSS включва префикса -webkit-. Можете да създадете партида стойности, вместо да измисляте всяка на ръка, а стойностите са наистина случайни.
CSS описва как браузърът трябва да изобрази ефект, докато прегледът ви дава визуален начин да проверите генерираната обработка на матово стъкло. Гласморфизмът е полезен, когато искате елемент да изглежда полупрозрачен и замъглен на фона зад него. Генерирането на CSS стойностите може да предостави начална точка за дизайн, тестова фикстура или начални данни.
Генераторът на гласморфизъм работи изцяло във вашия браузър. Входът му се обработва на вашето устройство; нищо не се качва, съхранява или изпраща на сървър. След като страницата се зареди, работи без връзка, така че можете да го използвате офлайн. Полезен е за разработчици и DevOps инженери, които искат да създават, преглеждат или използват повторно CSS стойности за матово стъкло.
Стъпка 1: Задайте наличните опции за ефекта на матово стъкло, като оттенък, замъгляване, рамка, радиус и сянка.
Стъпка 2: Генерирайте стойностите, за да създадете стек backdrop-filter за вашия дизайн.
Стъпка 3: Проверете прегледа върху цветния му градиентен фон, за да видите как изглежда замъгляването.
Стъпка 4: Копирайте нужните CSS стойности, включително декларацията с префикс -webkit-.
Случай на употреба: Създавайте готови за употреба стойности за гласморфизъм за тестове, фикстури или начални данни, без да пишете всяка стойност на ръка.
Случай на употреба: Генерирайте цяла партида стойности наведнъж, когато ви трябват няколко стила на матово стъкло.
Случай на употреба: Получавайте наистина случайни стойности вместо предположения, напечатани на клавиатура.
Случай на употреба: Опитвайте различни комбинации на оттенък, замъгляване, рамка, радиус и сянка, докато изграждате карта от матово стъкло.
Случай на употреба: Преглеждайте замъгляването върху цветен градиент, когато оценявате как стъкленият ефект може да изглежда върху различни цветове.
Случай на употреба: Копирайте генерираните CSS стойности в проект, когато ви трябва начална точка за ефект на матово стъкло.