CSS-glassmorphism-generator

Dette værktøj bygger en CSS-frostet-glas (glassmorphism)-effekt ved at kombinere en delvist gennemsigtig baggrund med backdrop-filter: blur() — træk skyderne over den farverige forhåndsvisning for at se glaskortet sløre alt, hvad der ligger bag det, og kopiér derefter CSS'en. Det producerer også -webkit-backdrop-filter-præfikset, som Safari stadig kræver.

Hvad er dette værktøj?

Glassmorphism er en UI-stil, hvor et element ser ud som frostet glas: en delvist gennemsigtig baggrund lader farverne bagved skinne igennem, mens backdrop-filter: blur() slører den baggrund, så det opleves som glas frem for et almindeligt gennemsigtigt panel. En tynd, delvist gennemsigtig kant og afrundede hjørner fuldender som regel udseendet.

Dette værktøj lader dig bygge den effekt visuelt. Forhåndsvisningen ligger over en bevægelig gradientbaggrund netop for at gøre sløringen synlig — glassmorphism ser kun rigtigt ud over noget med farve eller detaljer bagved, ikke en flad hvid side. Justér baggrundsfarvens opacitet, sløringsstyrken, kantens opacitet og hjørneradiussen, og kopiér derefter den genererede CSS.

Kilde: Filter Effects Module Level 1, W3C — definerer backdrop-filter, den egenskab denne effekt er bygget på.

Hvorfor bruge det?

Live forhåndsvisning over en farverig animeret baggrund, så du rent faktisk kan se den frostede-glas-effekt i stedet for at gætte dig frem til sløringsværdier mod en blank baggrund.
Fuld kontrol over baggrundsopacitet, backdrop-sløringsstyrke, kantopacitet og border-radius ét sted.
Producerer automatisk både backdrop-filter og -webkit-backdrop-filter-præfikset, så du ikke glemmer Safari-understøttelse.
Kører helt i din browser — intet, du konfigurerer, uploades nogen steder.
Gratis, ingen tilmelding, virker på mobil.

Sådan bruger du det

Vælg en baggrundsfarve, og justér dens opacitet — lavere opacitet (10–25 %) opleves som glas; højere opacitet ligner mere et solidt farvet panel.
Øg sløringsstyrken for at sløre det, der ligger bag elementet — det er det, der egentlig skaber det frostede-glas-udseende, adskilt fra gennemsigtigheden selv.
Justér kantopaciteten for at tilføje en diskret lys kant, hvilket hjælper glaskortet med at fremstå som en distinkt overflade frem for at smelte sammen med baggrunden.
Indstil border-radius for afrundede hjørner — glassmorphism-kort er næsten altid afrundede, sjældent skarphjørnede.
Kopiér den genererede CSS, og indsæt den i dit stylesheet. Husk, at elementet skal have noget med farve eller tekstur bag sig — glassmorphism er usynlig over en flad, ensfarvet baggrund.

Eksempel

Input

Baggrund: hvid ved 20 % opacitet · Sløring: 10px · Kantopacitet: 30 % · Radius: 16px

Output

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

En klassisk frostet-glas-kortstil brugt i login-paneler, navigationsbjælker og dashboard-widgets over en farverig eller fotobaseret baggrund.

Safari og browserunderstøttelse

backdrop-filter understøttes i nuværende Chrome, Firefox, Edge og Safari, men Safari har historisk krævet -webkit-backdrop-filter-præfikset sammen med den upræfikserede egenskab for at gengive sløringen — uden det ignorerer ældre Safari-versioner sløringen i stilhed og viser kun den flade gennemsigtige baggrund. Dette værktøj producerer altid begge erklæringer af den grund.

Se MDN's dokumentation om backdrop-filter for aktuelle detaljer om browserkompatibilitet: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Hvorfor glassmorphism kræver noget bag sig

backdrop-filter slører kun det, der visuelt ligger bag elementet — et baggrundsbillede, en gradient, et andet farvet element eller indhold, der scroller under. Over en almindelig hvid eller ensfarvet baggrund er der intet at sløre, så effekten er usynlig, og elementet ser bare ud som en let farvet, afrundet boks. Placér altid glassmorphism-elementer over en gradient, et foto eller en på anden måde livlig baggrund, for at effekten skal fremstå tydeligt.

Kombination med andre CSS-effekter

Glassmorphism-kort kombineres ofte med en diskret box-shadow nedenunder for ekstra dybde. Generér den frostede-glas-CSS her, og tilføj derefter en blød skygge med Box Shadow Generator, og anvend begge erklæringer på samme element.

→ Box Shadow-generator · Border Radius-generator

Ofte stillede spørgsmål

Hvorfor vises glaseffekten ikke på min side?

backdrop-filter slører det, der ligger bag elementet. Hvis dit element ligger over en almindelig hvid eller ensfarvet baggrund, er der intet visuelt interessant at sløre, så det ligner bare en svagt farvet boks. Placér det over en gradient, et billede eller en anden detaljeret baggrund, for at den frostede-glas-effekt skal være synlig.

Har jeg brug for -webkit-backdrop-filter-præfikset?

Ja, hvis du vil have effekten til at gengives pålideligt i Safari. Dette værktøj producerer altid både den almindelige backdrop-filter og -webkit--præfiksversionen sammen, da Safari historisk har krævet præfikset for at anvende sløringen.

Hvad er forskellen på baggrundsopacitet og sløring?

Baggrundsopacitet styrer, hvor meget af din valgte tonefarve der vises versus hvor meget af det bagvedliggende, der skinner uændret igennem. Sløring styrer, hvor meget den synlige baggrund udtværes/blødgøres. Glassmorphism bruger begge dele sammen — noget gennemsigtighed plus noget sløring — frem for kun den ene.

Kan jeg bruge backdrop-filter på et hvilket som helst element?

Ja, men det påvirker kun det, der visuelt ligger bag det pågældende element i sidens rendering, ikke elementets egne underelementer. Det har også en performance-omkostning på visse enheder, når det anvendes på mange elementer eller animeres hyppigt, så det bruges bedst til et lille antal fremtrædende UI-overflader som kort, modaler eller navigationsbjælker frem for dusinvis af små elementer.

Hvorfor er min kant næsten usynlig?

Kanten i dette værktøj bruger en delvist gennemsigtig hvid, hvilket er tilsigtet diskret — en let kant, der hjælper glaspanelet med at fremstå som en distinkt overflade uden at ligne en hård, uigennemsigtig kontur. Hæv kantopacitets-skyderen, hvis du ønsker en mere synlig kant.