CSS backdrop-filter -generaattori

Rakenna reaaliaikainen backdrop-filter CSS vetämällä liukusäätimiä yhdeksälle suodatinfunktiolle: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate ja sepia. Tuloste tuottaa sekä backdrop-filter että -webkit-backdrop-filter, jotta tehoste toimii nykyaikaisissa selaimissa, ja lasikortti renderöidään mukautettavan taustan päälle, jotta näet tuloksen sitä mukaa kun hienosäätät sitä.

1. Napsauta halutessasi esiasetusta (Frosted Glass, Dark Glass, Vintage, Inverted) aloittaaksesi kuratoidusta ulkoasusta. 2. Raahaa liukusäätimiä Controls-paneelissa; kukin suodatin näkyy luodussa CSS:ssä vain, kun se eroaa oletuksestaan (esim. brightness/contrast/saturate/opacity ovat oletuksena 100, blur on 0). 3. Muokkaa Background-kenttää millä tahansa kelvollisella CSS-tausta-arvolla (liukuväri, image url, väri) testataksesi suodatinta eri taiteen päällä. 4. Napsauta Copy kopioidaksesi sekä backdrop-filter- että -webkit-backdrop-filter-määritteet.

blur 0–50px; brightness 0–200% (oletus 100); contrast 0–200% (oletus 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (oletus 100); saturate 0–200% (oletus 100); sepia 0–100%. Reset palauttaa jokaisen liukusäätimen oletukseensa. Neutraalissa arvossaan olevat suodattimet jätetään pois tulosteesta; jos kaikki ovat neutraaleja, tulos on backdrop-filter: none.