CSS backdrop-filter-generator

Bygg live backdrop-filter CSS ved å dra glidebrytere for ni filterfunksjoner: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate og sepia. Utdataen sender ut både backdrop-filter og -webkit-backdrop-filter så effekten fungerer på tvers av moderne nettlesere, og et glasskort rendres over en tilpassbar bakgrunn slik at du kan se resultatet mens du justerer det.

1. Valgfritt klikk en preset (Frostet glass, Mørkt glass, Vintage, Invertert) for å starte fra et utvalgt utseende. 2. Dra glidebryterne i Kontroll-panelet; hvert filter vises kun i den genererte CSS-en når det skiller seg fra sin standard (f.eks. brightness/contrast/saturate/opacity standard til 100, blur standard til 0). 3. Rediger Bakgrunn-feltet med en hvilken som helst gyldig CSS-bakgrunnsverdi (gradient, bilde-url, farge) for å teste filteret over ulike kunstverk. 4. Klikk Kopier for å kopiere både backdrop-filter og -webkit-backdrop-filter-deklarasjoner.

blur 0–50px; brightness 0–200% (standard 100); contrast 0–200% (standard 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (standard 100); saturate 0–200% (standard 100); sepia 0–100%. Tilbakestill gjenoppretter hver glidebryter til sin standard. Filter ved sin nøytrale verdi utelates fra utdata; hvis alle er nøytrale er utdataen backdrop-filter: none.