CSS Glassmorphism-generator

Dette verktøyet bygger en frostet-glass-effekt (glassmorphism) i CSS ved å kombinere en halvgjennomsiktig bakgrunn med backdrop-filter: blur() — dra i glidebryterne over den fargerike forhåndsvisningen for å se glasskortet uskarpgjøre alt som ligger bak det, og kopier så CSS-en. Verktøyet gir også ut -webkit-backdrop-filter-prefikset Safari trenger, siden backdrop-filter fortsatt krever det der.

Hva er dette verktøyet?

Glassmorphism er en UI-stil der et element ser ut som matt glass: en halvgjennomsiktig bakgrunn lar farger bak den skinne igjennom, mens backdrop-filter: blur() gjør den bakgrunnen uskarp slik at den leses som glass i stedet for et enkelt gjennomsiktig panel. En tynn, halvgjennomsiktig kant og runde hjørner fullfører vanligvis utseendet.

Dette verktøyet lar deg bygge den effekten visuelt. Forhåndsvisningen ligger over en bevegelig gradientbakgrunn nettopp for at uskarpheten skal være synlig — glassmorphism leses bare riktig over noe med farge eller detalj bak seg, ikke en flat, hvit side. Juster opasiteten til bakgrunnsfargen, uskarphetens styrke, kantens opasitet og hjørneradiusen, og kopier så den genererte CSS-en.

Kilde: Filter Effects Module Level 1, W3C — definerer backdrop-filter, egenskapen denne effekten bygger på.

Hvorfor bruke det?

Live forhåndsvisning over en fargerik, animert bakgrunn, slik at du faktisk kan se matteglasseffekten i stedet for å gjette deg fram til uskarphetsverdier mot en tom bakgrunn.
Full kontroll over bakgrunnsopasitet, backdrop-blur-styrke, kantopasitet og border-radius på ett sted.
Gir ut både backdrop-filter og -webkit-backdrop-filter-prefikset automatisk, så du ikke glemmer Safari-støtte.
Kjører helt i nettleseren din — ingenting du stiller inn lastes opp noe sted.
Gratis, ingen registrering, fungerer på mobil.

Slik bruker du det

Velg en bakgrunnsfarge og juster opasiteten — lavere opasitet (10–25 %) leses som glass, mens høyere opasitet ser mer ut som et solid, tonet panel.
Øk uskarphetens styrke for å gjøre det som ligger bak elementet uskarpt — det er dette som faktisk skaper matteglassutseendet, atskilt fra selve gjennomsiktigheten.
Juster kantopasiteten for å legge til en subtil, lys kant, som hjelper glasskortet til å leses som en egen flate i stedet for å smelte inn i bakgrunnen.
Still inn border-radius for runde hjørner — glassmorphism-kort er nesten alltid runde, sjelden skarpkantede.
Kopier den genererte CSS-en og lim den inn i stilarket ditt. Husk at elementet trenger noe med farge eller tekstur bak seg — glassmorphism er usynlig over en flat, ensfarget bakgrunn.

Eksempel

Inndata

Bakgrunn: hvit med 20 % opasitet · Uskarphet: 10px · Kantopasitet: 30 % · Radius: 16px

Resultat

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 matteglass-kortstil som brukes i innloggingspaneler, navigasjonsfelt og dashbord-widgeter over en fargerik bakgrunn eller fotobakgrunn.

Safari og nettleserstøtte

backdrop-filter støttes i nåværende versjoner av Chrome, Firefox, Edge og Safari, men Safari har historisk krevd -webkit-backdrop-filter-prefikset sammen med den uprefikserte egenskapen for å rendre uskarpheten — uten det ignorerer eldre Safari-versjoner uskarpheten stilltiende og viser bare den flate, gjennomsiktige bakgrunnen. Derfor gir dette verktøyet alltid ut begge deklarasjonene.

Se MDNs dokumentasjon for backdrop-filter for oppdaterte detaljer om nettleserkompatibilitet: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Hvorfor glassmorphism trenger noe bak seg

backdrop-filter gjør bare det som visuelt ligger bak elementet uskarpt — et bakgrunnsbilde, en gradient, et annet farget element, eller innhold som skrolles under. Over en ren hvit eller ensfarget bakgrunn er det ingenting å gjøre uskarpt, så effekten er usynlig og elementet ser bare ut som en svakt tonet, rund boks. Plasser alltid glassmorphism-elementer over en gradient, et foto eller en ellers livlig bakgrunn for at effekten skal komme til sin rett.

Kombinere med andre CSS-effekter

Glassmorphism-kort kombineres ofte med en subtil box-shadow under for ekstra dybde. Generer matteglass-CSS-en her, legg deretter til en myk skygge med Box Shadow Generator og bruk begge deklarasjonene på samme element.

→ Box Shadow-generator · Border Radius-generator

Ofte stilte spørsmål

Hvorfor vises ikke glasseffekten på siden min?

backdrop-filter gjør det som ligger bak elementet uskarpt. Hvis elementet ditt ligger over en ren hvit eller ensfarget bakgrunn, er det ingenting visuelt interessant å gjøre uskarpt, så det ser bare ut som en svakt tonet boks. Plasser det over en gradient, et bilde eller en annen detaljrik bakgrunn for at matteglasseffekten skal bli synlig.

Trenger jeg -webkit-backdrop-filter-prefikset?

Ja, hvis du vil at effekten skal rendres pålitelig i Safari. Dette verktøyet gir alltid ut både den vanlige backdrop-filter og den -webkit-prefikserte versjonen sammen, siden Safari historisk har trengt prefikset for å bruke uskarpheten.

Hva er forskjellen mellom bakgrunnsopasitet og uskarphet?

Bakgrunnsopasitet styrer hvor mye av den valgte tonefargen som vises sammenlignet med hvor mye av det som ligger bak som skinner uendret igjennom. Uskarphet styrer hvor mye den synlige bakgrunnen smøres ut/mykes opp. Glassmorphism bruker begge deler sammen — noe gjennomsiktighet pluss noe uskarphet — heller enn den ene alene.

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

Ja, men den påvirker bare det som visuelt ligger bak det elementet i sidens rendring, ikke elementets egne underelementer. Den har også en ytelseskostnad på enkelte enheter når den brukes på mange elementer eller animeres ofte, så den egner seg best for et lite antall fremtredende UI-flater som kort, modaler eller navigasjonsfelt, snarere enn dusinvis av små elementer.

Hvorfor er kanten min knapt synlig?

Kanten i dette verktøyet bruker en halvgjennomsiktig hvit farge, som er ment å være subtil — en lys kant som hjelper glasspanelet til å leses som en egen flate uten å se ut som en hard, ugjennomsiktig kontur. Skru opp kantopasiteten hvis du vil ha en mer synlig kant.