CSS Glassmorphism generaator

See tööriist loob CSS jäätunud klaasi (glassmorphism) efekti, kombineerides pooläbipaistva tausta ja backdrop-filter: blur() omadusega — lohista liugureid värvilise eelvaate kohal, et näha, kuidas klaaskaart hägustab kõike enda taga, ja kopeeri seejärel CSS. Tööriist väljastab ka Safari jaoks vajaliku -webkit-backdrop-filter prefiksi, kuna backdrop-filter vajab seda seal endiselt.

Mis see tööriist on?

Glassmorphism on UI stiil, kus element näeb välja nagu jäätunud klaas: pooläbipaistev taust laseb tema taga olevatel värvidel läbi paista, samal ajal kui backdrop-filter: blur() hägustab seda tausta, nii et see mõjub klaasina, mitte lihtsalt läbipaistva paneelina. Õhuke, pooläbipaistev äär ja ümarad nurgad viimistlevad tavaliselt selle välimuse.

See tööriist võimaldab sul seda efekti visuaalselt luua. Eelvaade asub liikuva gradiendiga tausta peal just selleks, et hägustus oleks nähtav — glassmorphism mõjub õigesti ainult värvilise või detailirikka tausta peal, mitte lameda valge lehe peal. Reguleeri tausta värvi läbipaistvust, hägustuse tugevust, äärise läbipaistvust ja nurga raadiust ning kopeeri seejärel loodud CSS.

Allikas: Filter Effects Module Level 1, W3C — defineerib backdrop-filter'i, omaduse, millel see efekt põhineb.

Miks seda kasutada?

Reaalajas eelvaade liikuva värvilise tausta peal, nii et näed jäätunud klaasi efekti tegelikult, mitte ei pea hägustuse väärtusi tühja tausta peal aimama.
Täielik kontroll tausta läbipaistvuse, tausta hägustuse tugevuse, äärise läbipaistvuse ja border-radius'e üle ühes kohas.
Väljastab automaatselt nii backdrop-filter kui ka -webkit-backdrop-filter prefiksi, nii et sa ei unusta Safari tuge.
Töötab täielikult sinu brauseris — midagi, mida sa seadistad, ei laadita kuhugi üles.
Tasuta, registreerimist pole vaja, töötab ka mobiilis.

Kuidas kasutada

Vali taustavärv ja reguleeri selle läbipaistvust — madalam läbipaistvus (10–25%) mõjub klaasina; suurem läbipaistvus näeb rohkem välja nagu ühtlane toonitud paneel.
Suurenda hägustuse tugevust, et hägustada elemendi taga olevat — see loobki tegelikult jäätunud klaasi välimuse, erinevalt lihtsalt läbipaistvusest.
Reguleeri äärise läbipaistvust, et lisada õrn valgusega äär, mis aitab klaaskaardil mõjuda eraldiseisva pinnana, mitte taustaga sulanduda.
Määra border-radius ümarate nurkade jaoks — glassmorphism kaardid on peaaegu alati ümarad, harva teravate nurkadega.
Kopeeri loodud CSS ja kleebi see oma stiililehele. Pea meeles, et element vajab enda taga midagi värvilist või tekstuuriga — glassmorphism on lameda ühevärvilise tausta peal nähtamatu.

Näide

Sisend

Taust: valge 20% läbipaistvusega · Hägustus: 10px · Äärise läbipaistvus: 30% · Raadius: 16px

Tulemus

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;

Klassikaline jäätunud klaasi kaardi stiil, mida kasutatakse sisselogimispaneelidel, navigeerimisribadel ja armatuurlaua vidinatel värvilise või foto tausta peal.

Safari ja brauseritugi

backdrop-filter on toetatud praeguses Chrome'is, Firefoxis, Edge'is ja Safaris, kuid Safari on ajalooliselt nõudnud -webkit-backdrop-filter prefiksit koos prefiksita omadusega, et hägustus renderdataks — ilma selleta ignoreerivad vanemad Safari versioonid hägustust vaikimisi ja näitavad vaid lamedat läbipaistvat tausta. Seetõttu väljastab see tööriist alati mõlemad deklaratsioonid.

Vaata MDN-i backdrop-filter dokumentatsiooni aktuaalse brauseriühilduvuse kohta: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Miks glassmorphism vajab enda taha midagi

backdrop-filter hägustab ainult seda, mis on visuaalselt elemendi taga — taustapilti, gradienti, teist värvilist elementi või selle alt kerivat sisu. Lameda valge või ühevärvilise tausta peal pole midagi hägustada, seega on efekt nähtamatu ja element näeb lihtsalt välja nagu kergelt toonitud ümar kast. Aseta glassmorphism elemendid alati gradiendi, foto või muul viisil rikkaliku tausta peale, et efekt oleks näha.

Kombineerimine teiste CSS efektidega

Glassmorphism kaardid kombineerivad tihti alla lisatud õrna box-shadow'i lisasügavuse jaoks. Loo siin jäätunud klaasi CSS ja lisa seejärel pehme vari Box Shadow generaatoriga ning rakenda mõlemad deklaratsioonid samale elemendile.

→ Box Shadow Generaator · Border Radius Generaator

Korduma kippuvad küsimused

Miks klaasi efekt mu lehel ei ilmu?

backdrop-filter hägustab seda, mis on elemendi taga. Kui su element asub lameda valge või ühevärvilise tausta peal, pole seal midagi visuaalselt huvitavat hägustada, seega näeb see lihtsalt välja nagu kahvatu toonitud kast. Aseta see gradiendi, pildi või muu detailirikka tausta peale, et jäätunud klaasi efekt oleks nähtav.

Kas mul on vaja -webkit-backdrop-filter prefiksit?

Jah, kui soovid, et efekt renderduks usaldusväärselt Safaris. See tööriist väljastab alati koos nii standardse backdrop-filter kui ka -webkit- prefiksiga versiooni, kuna Safari on ajalooliselt vajanud prefiksit hägustuse rakendamiseks.

Mis vahe on tausta läbipaistvusel ja hägustusel?

Tausta läbipaistvus kontrollib, kui palju sinu valitud toonivärv paistab võrreldes sellega, kui palju taga olevast muutumatult läbi paistab. Hägustus kontrollib, kui palju seda nähtavat tausta on hägustatud/pehmendatud. Glassmorphism kasutab mõlemat koos — nii mõningast läbipaistvust kui ka hägustust — mitte kumbagi eraldi.

Kas backdrop-filter'it saab kasutada mistahes elemendil?

Jah, kuid see mõjutab ainult seda, mis on visuaalselt elemendi taga lehe renderduses, mitte elemendi enda lapselemente. Sellel on ka teatud seadmetel jõudluskulu, kui seda rakendatakse paljudele elementidele või animeeritakse sageli, seega on seda parim kasutada väikese arvu silmapaistvate UI pindade puhul, näiteks kaardid, modaalaknad või navigeerimisribad, mitte kümnete väikeste elementide puhul.

Miks mu äär on vaevu nähtav?

Äär selles tööriistas kasutab pooläbipaistvat valget, mis on mõeldud olema õrn — kerge äär, mis aitab klaaspaneelil mõjuda eraldiseisva pinnana, ilma et see näeks välja nagu kõva, läbipaistmatu joon. Suurenda äärise läbipaistvuse liugurit, kui soovid nähtavamat äärt.