Wat is glassmorfisme? Hoe achtergrondfilter Frosted Glass bouwt in CSS

Berijpte glaspanelen zijn overal in interface-ontwerp: de doorschijnende zijbalk op een desktopbesturingssysteem, de wazige header die een foto doorlaat, de kaart die over een verloop op een landingspagina zweeft De look is eenvoudig te beschrijven en vreemd gemakkelijk om fout te maken in CSS. Een paneel eindigt plat en grijs, of de waas doet niets, of de witte tekst erop is onleesbaar over de helft van de achtergrond.

In deze handleiding wordt uitgelegd wat de CSS is die het effect laat werken, waarom elk van de vijf eigenschappen er is, hoe tekst leesbaar kan worden gehouden wanneer de achtergrond steeds verandert, wat het kost bij het weergeven van prestaties en hoe je gracieus terugvalt De bewerkte voorbeelden gebruiken de output van de Toolz glassmorphism CSS generator, die de code opbouwt uit schuifregelaars en een live preview.

tl;dr: Glassmorfisme is een UI-stijl waarbij een paneel eruitziet als matglas: een semi-transparante achtergrond plus backdrop-filter: blur() dus de inhoud erachter komt zachtjes door, meestal afgewerkt met een 1px doorschijnende rand en een zachte schaduw Er zijn twee dingen nodig om zichtbaar te zijn: een vulling die deels transparant is en iets kleurrijks achter het paneel Tekstcontrast verandert met wat er ook onderdoor gaat, dus test het tegen de helderste en donkerste delen van de echte achtergrond De CSS-glazenmorfismegenerator schrijft het volledige blok, inclusief de -webkit- prefix, client-side, gratis, geen aanmelding.

Wat is glasmorfisme in CSS?

Glassmorfisme is een visuele stijl die matglas imiteert Een element krijgt een achtergrondkleur met lage dekking en een achtergrondfilter dat de pixels erachter vervaagt, zodat vormen en kleuren eronder door het oppervlak verzacht lijken Een dunne lichtrand suggereert de glasrand, en een zachte schaduw tilt het paneel van de pagina.

De belangrijkste eigenschap is backdrop-filter, gedefinieerd in het W3C Filtereffecten Module Niveau 2. Er zijn dezelfde filterfuncties nodig als filter ((blur(), saturate(), brightness() en de rest) maar past ze toe op het gebied achter het element in plaats van op het element zelf Dat ene verschil is wat het effect mogelijk maakt.

Hier is het volledige blok dat de generator produceert voor zijn Frosted-voorinstelling:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

Zes lijnen, en elk heeft een baan.

filter versus achtergrondfilter: wat is het verschil?

filter verandert hoe het element zelf wordt getekend, inclusief de tekst en de kinderen. backdrop-filter verandert wat van achteren door het element heen zichtbaar is, en laat het element' de eigen inhoud scherp.

Property	Wat het beïnvloedt	Vervagingsvoorbeeldresultaat	Typisch gebruik
filter: blur(10px)	Het element en al zijn kinderen	De kaart en de tekst ervan zijn wazig	Afbeeldingseffecten, uitgeschakelde toestanden, tijdelijke aanduidingen laden
backdrop-filter: blur(10px)	Wat er ook achter het element geschilderd is	De kaart blijft scherp, de achtergrond die er doorheen wordt gezien is wazig	Berijpte glaspanelen, wazige headers, modale overlays

Als je een kaart vervaagt met filter en vraag je af waarom de kop onleesbaar is, je hebt de verkeerde eigenschap gebruikt De CSS filter generator dekt de filter kant van het paar.

Hoe werkt elke lijn van de glas CSS?

De achtergrond is de tint, en zijn alfakanaal is het belangrijkste getal in het blok. rgba(255, 255, 255, 0.2) is wit op 20% opaciteit Bij een alfa van 1 is het paneel massief en komt er niets doorheen, dus de achtergrondonscherpte is onzichtbaar Bij een alfa van 0 is er helemaal geen oppervlak Het meest bruikbare glas zit tussen 0,1 en 0,4.

In de generator is dit de Transparantie schuifregelaar, en de naamgeving heeft een opmerking nodig: de schuifregelaar stelt de dekking van de vulling in, dus een hogere Transparantiewaarde maakt het paneel steviger Transparantie 20% schrijft een alfa van 0,2, en 40% schrijft 0,4.

Het achtergrondfilter doet het glazuur. blur(10px) stelt de straal in van de onscherpte die wordt toegepast op wat zich daarachter bevindt. saturate(120%) verhoogt de kleur van die wazige achtergrond met 20%, wat de grijze, vervaagde look tegengaat die wazig is plus een witte tint die de neiging heeft te produceren De generator' s Blur-schuifregelaar loopt van 0 tot 40px en verzadiging van 100% tot 200%.

Het voorvoegsel kopie bestaat omdat oudere Safari-releases het alleen begrijpen -webkit-backdrop-filter. Beide regels met identieke waarden schrijven kost niets en dekt die versies.

De grensradius rondt de hoeken af, 0 tot 50px in de generator De onscherpte wordt tot de afgeronde vorm geknipt.

De grens is een 1px lijn van wit met een dekking van 18% Het springt in het oog als een hoogtepunt op de glasrand en is het belangrijkst op donkere achtergronden, waar de paneelgrens anders zou oplossen De generator' s Border checkbox zet het aan of uit; de kleur en breedte zijn vast.

De schaduw 0 8px 32px rgba(0, 0, 0, 0.12) is een brede, zwakke slagschaduw die het paneel van de pagina scheidt Als u het wilt afstemmen, zal de box shadow guide verklaart offset, vervaging en verspreiding in de diepte.

Wat produceren de generatorvoorinstellingen?

De presets zijn eerder uitgangspunten dan afgewerkte ontwerpen Alle vijf gebruiken een straal van 16px, en alle behalve Subtle bevatten de rand.

Voorinstelling	achtergrond	Achtergrondfilter	Border	Best over
Frosted	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	On	Kleurrijke gradiënten en foto's
Light	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	On	Drukke afbeeldingen waar tekst meer ondersteuning nodig heeft
Dark	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	On	Lichte foto's, witte tekst
Levendig	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	On	Donkere of verzadigde heldensecties
Subtiel	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	Off	Kleine chips en badges

De generator laadt met Frosted geselecteerd Klik op een voorinstelling, pas de schuifregelaars en de tintkleur aan, en het codeblok wordt bijgewerkt terwijl u sleept.

Waarom werkt mijn achtergrondfilter niet?

Wanneer de waas niets blijkt te doen, is een daarvan bijna altijd de oorzaak.

1. De achtergrond is ondoorzichtig. Een vaste stof background: #fff of een alfa van 1 verbergt de achtergrond volledig Laat de alfa zakken.
2. Er zit niets achter dat vervaagt. Over een vlakke eenkleurige pagina ziet een wazige platte kleur er identiek uit aan de platte kleur Glas heeft een verloop nodig, een foto of vormen erachter De generator' s preview zit om deze reden bewust over een verloop met gekleurde cirkels; de CSS-gradiëntgids is een goede bron van achtergronden die het effect goed laten zien.
3. Het voorvoegsel ontbreekt. Oudere Safari-versies negeren de niet-voorgeplaatste eigenschap.
4. Een voorouder beperkt wat het filter kan zien. In de huidige Filtereffecten-specificatie zijn er enkele eigenschappen op een voorouder, zoals die van hemzelf filter, een opacity onder 1 of een andere backdrop-filter, start een nieuwe achtergrondwortel, en de vervaging bemonstert alleen de inhoud in die wortel. Als het glas met een van deze in een wikkel zit, verplaats dan het effect of de eigenschap.
5. Het paneel heeft geen formaat of is op een andere manier volledig transparant. Een nulhoogte-element of opacity: 0 op het paneel verbergt het effect samen met het paneel.

Hoe houd je tekst leesbaar op een glazen paneel?

Leesbaar glas kost meer werk dan enig ander onderdeel van de stijl, omdat de tekstkleur vaststaat terwijl de achtergrond onder het paneel dat niet is De WCAG 2.2 contrastminimum vraagt om een verhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst Op een doorschijnend paneel hangt die verhouding af van wat zich op dat moment achter elk deel van het paneel bevindt.

Een bewerkt voorbeeld maakt dit concreet De contrastverhouding wordt berekend uit de relatieve luminantie van de twee kleuren, (L1 + 0,05) /(L2 + 0,05) Een glasvulcomposieten over de achtergrond: elk kanaal wordt alfa maal de vulling plus (1 min alfa) maal de achtergrond Blur gemiddeld naburige pixels maar laat een regio & #39; de gemiddelde kleur ongeveer waar deze was, dus over een groot gebied van één kleur is het composiet een redelijke schatting.

Fill	Achtergrondkleur	Samengestelde kleur	Contrasteren met witte tekst
Berijpt, wit op 0,2	Blue #60A5FA	over rgb(128, 183, 251)	ongeveer 2,1:1
Berijpt, wit op 0,2	Yellow #FBBF24	over rgb(252, 204, 80)	ongeveer 1,5:1
Donker, rgba(15, 23, 42, 0.25)	Blue #60A5FA	over rgb(76, 130, 198)	ongeveer 4,0:1

Neem de eerste rij. Rood is 0,2 x 255 + 0,8 x 96 = 127,8, groen is 0,2 x 255 + 0,8 x 165 = 183, blauw is 0,2 x 255 + 0,8 x 250 = 251. Die kleur' de relatieve luminantie komt uit in de buurt van 0,454, en wit's is 1, dus de verhouding is 1,05 /0,504, ongeveer 2,1:1. Dezelfde tekst gaat over de gele tekst heen, ongeveer 1.

De praktische oplossingen, in volgorde van effectiviteit:

• Verhoog de vul-alfa. Door transparantie van 20% naar 40% te verplaatsen, wordt een groter deel van de achtergrond verborgen en wordt het bereik dat het contrast overbrugt kleiner.
• Donkerder de tint voor lichte tekst, of lichter voor donkere tekst Donker glas met witte tekst houdt over veel meer achtergronden omhoog dan wit glas met witte tekst.
• Verhoog de onscherpte. Het egaliseert contrastrijk detail, waardoor een dunne witte lijn achter een letter er niet doorheen snijdt.
• Voeg een tekstschaduw toe als laatste redmiddel voor koppen De tekstschaduwgenerator maakt snel een zachte.
• Test aan de uitersten. Controleer het contrast over de helderste en donkerste gebieden waar het paneel op kan zitten, met de kleurcontrastcontrole, niet op één handige plek.

De generator' s gekopieerde CSS heeft alleen betrekking op het glasoppervlak De witte tekst in het voorbeeld maakt geen deel uit van de uitvoer, dus ingesteld color zelf op je element.

Doet achtergrondfilter de prestaties pijn?

Het kan Een achtergrondvervaging dwingt de browser om de pixels achter het element terug te lezen en er elke keer dat dat gebied verandert een vervaging over te laten lopen Op een statische kaart die goedkoop is Op een groot gebied, tijdens het scrollen, of wanneer inhoud achter het paneel animeert, is het een van de duurdere effecten voor composiet, en telefoons met een lager vermogen tonen het eerst als gevallen frames.

Richtlijnen die het onder controle houden:

• Houd glaspanelen bescheiden van formaat Een full-viewport matte overlay kost veel meer dan een kaart.
• Liever kleinere onscherpe stralen De kosten groeien met de straal, en voorbij ongeveer 20px is het visuele verschil klein.
• Vermijd animeren van de vervagingswaarde zelf Animeren opacity of transform van het paneel in plaats daarvan.
• Wees voorzichtig met plakkerige headers over lang scrollende inhoud, die op elk scrollframe opnieuw vervagen Test op een echte telefoon uit het middensegment.

Hoe voeg je een terugval toe voor browsers of gebruikers die er een nodig hebben?

Huidige versies van Chrome, Edge, Firefox en Safari ondersteunen allemaal backdrop-filter. Zeer oude browsers negeren het en tonen de semi-transparante vulling zonder de vervaging, die bij lage alfa tekst op een drukke achtergrond kan achterlaten Twee kleine toevoegingen zorgen ervoor dat het effect goed verslechtert U kunt de huidige ondersteuningstabel controleren op MDN's achtergrondfilterpagina.

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

de @supports block past alleen de doorschijnende versie toe waar de onscherpte bestaat De prefers-reduced-transparency mediafunctie, gedefinieerd in Mediaquery's Niveau 5, laat gebruikers die hun besturingssysteem om minder transparantie hebben gevraagd een solide paneel krijgen Browserondersteuning voor die mediafunctie is nog steeds gedeeltelijk, dus behandel het als een verbetering waar beschikbaar in plaats van de enige beveiliging.

Glassmorfisme versus neumorfisme versus plat ontwerp

Glassmorfisme is een van de vele oppervlaktestijlen, en elk heeft andere kosten.

Stijl	Hoe het oppervlak wordt gemaakt	Hoofd CSS	kracht	Hoofdrisico
Glasmorfisme	Doorschijnende vulling plus achtergrondonscherpte	background met alfa, backdrop-filter	Diepte en context vanaf de achtergrond	Contrast varieert, vervaging kost prestaties
Neumorfisme	Dezelfde kleur als de pagina, verhoogd of ingedrukt door gepaarde schaduwen	Two box-shadow lagen	Zachte, voelbare bedieningselementen	Zeer laag contrast tussen controle en pagina
Flat	Stevige vullingen, geen diepte	background	Snel en voorspelbaar	Kan duidelijk aanvoelen
Materiaalstijlverhoging	Vaste vulling met schaduwdiepteniveaus	box-shadow	Hiërarchie wissen	Minder sfeervol

Als de zachte, geëxtrudeerde look dichter bij wat je wilt is, de neumorfismegenerator bouwt de gepaarde schaduwen Veel interfaces mix stijlen: glas voor een zwevende navigatiebalk over een heldenafbeelding, platte kaarten voor dichte inhoud eronder.

Hoe een glazen kaart te bouwen, begin tot eind

1. Open de matglas CSS generator en kies de voorinstelling die het dichtst bij uw achtergrond ligt: donker voor lichte foto's, rijp of licht voor kleurrijke hellingen.
2. Stel Blur zo hoog in dat achtergronddetails niet concurreren met tekst, meestal 8 tot 16px.
3. Transparantie instellen Begin bij 20% en verhoog deze totdat uw tekst contrast over het zwaarste deel van de achtergrond doorgeeft.
4. Kies een tint met de kleurenkiezer Een tint getekend van de achtergrond' zijn eigen palet ziet er natuurlijker uit dan puur wit.
5. Pas Radius aan om overeen te komen met de rest van uw componenten en houd Border aan voor donkere achtergronden.
6. Klik op CSS kopiëren en plak het blok op uw kaartklasse Toevoegen color en jezelf opvullen.
7. Wikkel het blok in de @supports fallback hierboven als u oudere browsers ondersteunt.

Alles in de generator draait in uw browser, dus niets wordt geüpload en het blijft offline werken nadat de pagina is geladen Voor gerelateerde oppervlakte - en effecttools, de CSS tools hub geeft een overzicht van gradiënten, schaduwen, filters en overgangen op één plek.