Projektowanie

Generator glassmorfizmu

Twórz w CSS efekt matowego szkła — rozmycie, przezroczystość, odcień i podgląd na żywo Działa na urządzeniu — nic nie jest wysyłane ani zapisywane.

Rozmycie12px

Przezroczystość20%

Nasycenie120%

Zaokrąglenie narożników16px

Grubość obramowania1px

Krycie obramowania40%

Kolor odcienia

#ffffff

Tło

Podgląd

Glassmorfizm

Wynikowy kod CSS

/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.40);

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  background: rgba(255, 255, 255, 0.60);
}

Powiązane

Generator CSS clip-pathProjektowanie Edytor krzywych cubic-bezierProjektowanie Generator blobów SVGProjektowanie

O narzędziu: Generator glassmorfizmu

Twórz w CSS efekt matowego szkła — rozmycie, przezroczystość, odcień i podgląd na żywo

Generator glassmorfizmu to bezpłatne narzędzie z kategorii „Projektowanie i grafika” w serwisie BrowseryTools. Działa w całości w Twojej przeglądarce: to, co mu przekażesz, jest przetwarzane na Twoim własnym urządzeniu i nigdy nie trafia na serwer. Nie ma rejestracji, reklam ani znaków wodnych, a po wczytaniu strony narzędzie działa dalej nawet bez połączenia.