Generator CSS glasmorfizmu
Twórz CSS dla paneli z efektem matowego szkła lub miękkich interfejsów neomorficznych za pomocą suwaków bez pisania kodu.
Generator CSS glasmorfizmu
Utwórz kompletną regułę CSS dla panelu z efektem matowego szkła lub miękkiego interfejsu neomorficznego bez ręcznego wpisywania wartości. Wybierz glasmorfizm dla przezroczystej karty, która rozmywa zawartość za nią — wygląd używany na nowoczesnych pulpitach, panelach logowania i modalach — lub neomorfizm dla powierzchni, która wygląda, jakby była ukształtowana z tego samego materiału co jej tło, używając pary przeciwnych miękkich cieni zamiast przezroczystości.
Opcje bezpośrednio mapują właściwości, które narzędzie zapisuje. W trybie szkła przezroczystość powierzchni i siła rozmycia kontrolują alfa tła i rozmycie backdrop-filter, podczas gdy grubość obramowania i jasność obramowania ustawiają cienkie, semi-przezroczyste krawędzie, które utrzymują czytelność panelu na zajętych tłach. Odległość cienia i miękkość kształtują cień pod panelem, a przełącznik kształtu zmienia go na cień wciśnięty dla wciśniętego efektu. W trybie neomorfizmu te same wartości odległości i miękkości cienia kierują jasnym i ciemnym cieniem obliczonym z Twojego koloru powierzchni, wypukły lub wciśnięty w zależności od wybranego kształtu. Zaokrąglenie narożników i wariant trybu ciemnego mają zastosowanie do obu stylów.
Ponieważ rozmyta lub miękko zacieniowana powierzchnia może znaleźć się w tonacji, którą trudno czytać czarnym lub białym tekstem, narzędzie sprawdza wynikający kontrast i dodaje krótki komentarz ostrzegawczy ponad CSS, gdy żaden kolor tekstu nie byłby wygodny powyżej WCAG AA — zachęta do regulacji koloru powierzchni lub przezroczystości zamiast zgadywania.
Wszystko dzieje się lokalnie w Twojej przeglądarce, gdy przesuwasz suwaki — żaden program do projektowania, żaden konto i nic nie wysyłane na serwer. Skopiuj CSS bezpośrednio do arkusza stylów, pobierz go jako plik .txt lub wyślij wyjście z powrotem na wejście, aby nadal je regulować.