Generator glassmorphism CSS

Czym jest Generator glassmorphism CSS?

Generator glassmorphism CSS to darmowy edytor wizualny stylu interfejsu z matowego szkła (glassmorphism), stworzony dla programistów front-end i projektantów produktów. Dostosuj stopień rozmycia, przezroczystość powierzchni, nasycenie koloru, grubość obramowania, promień rogów i siłę cienia za pomocą pól liczbowych i suwaków, a następnie wybierz kolor zabarwienia próbnikiem. Panel podglądu pokazuje szklany panel nad żywym gradientowym tłem w czasie rzeczywistym, a pełny CSS — z backdrop-filter, półprzezroczystym tłem, subtelnym obramowaniem i box-shadow — jest generowany do skopiowania. Używaj go do tworzenia szklanych kart, pasków nawigacji, okien modalnych i nakładek bez ręcznego dostrajania alfy rgba ani pamiętania o prefiksie -webkit-backdrop-filter.

Jak używać Generator glassmorphism CSS

1. Ustaw Rozmycie (w px), aby kontrolować, jak mocno obszar za panelem jest matowiony.
2. Zmniejsz Przezroczystość, aby szkło było bardziej prześwitujące, lub zwiększ ją dla bardziej litej powierzchni.
3. Podnieś Nasycenie powyżej 100%, aby kolory tła przebijały przez szkło.
4. Wybierz kolor zabarwienia próbnikiem i dostosuj szerokość Obramowania, Promień i Cień, aby dopracować wygląd.
5. Obserwuj, jak podgląd aktualizuje się nad tłem w czasie rzeczywistym, gdy zmieniasz każdą wartość.
6. Skopiuj wygenerowany CSS do swojego arkusza stylów — zawiera już rezerwę -webkit-backdrop-filter.

Przykłady

rozmycie 12, przezroczystość 25%, nasycenie 120%, promień 16, obramowanie 1, cień 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

rozmycie 8, przezroczystość 60%, nasycenie 100%, promień 0, obramowanie 1, cień 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

zabarwienie #0f172a, rozmycie 20, przezroczystość 30%, nasycenie 140%, promień 24, cień 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Najczęściej zadawane pytania

Co robi backdrop-filter?

backdrop-filter stosuje efekty graficzne — tutaj rozmycie i nasycenie — do wszystkiego, co znajduje się za elementem, i to właśnie tworzy wygląd matowego szkła. Generator wypisuje zarówno backdrop-filter, jak i prefiks -webkit-backdrop-filter, aby działał w różnych przeglądarkach, a do tego półprzezroczyste tło, obramowanie i cień.

Dlaczego jest regulacja przezroczystości?

Efekt szkła potrzebuje częściowo prześwitującego tła, aby rozmyte tło było widoczne. Suwak Przezroczystości ustawia alfę koloru tła panelu (rgba): niższe wartości są bardziej przezroczyste, wyższe bardziej nieprzezroczyste i lite.

Czy mogę użyć kolorowego lub ciemnego szkła?

Tak. Wybierz dowolny kolor zabarwienia próbnikiem — narzędzie wmiesza go w tło rgba, więc możesz stworzyć ciepłe, chłodne lub ciemne szkło. Połącz ciemne zabarwienie z wyższą przezroczystością, aby uzyskać nastrojowe nakładki, lub pozostaw biel dla klasycznego matowego panelu.

Czy zadziała w każdej przeglądarce?

Większość nowoczesnych przeglądarek obsługuje backdrop-filter. Wygenerowany CSS zawiera prefiks -webkit-backdrop-filter dla Safari i starszego Chromium, ale bardzo stare przeglądarki go ignorują i po prostu pokazują półprzezroczyste tło bez rozmycia.

Czy moje dane są gdzieś wysyłane?

Nie. Generator działa w całości w Twojej przeglądarce za pomocą JavaScript — Twoje kolory i wartości nigdy nie są wysyłane na serwer, więc działa prywatnie, a po jednorazowym wczytaniu strony nawet offline.