CSS backdrop-filter-generator

Byg gennem live backdrop-filter CSS ved at dræje sliderer for nine filterfunktioner: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate og sepia. Outputten genererer både backdrop-filter og -webkit-backdrop-filter, så effekten virker i alle moderne browser, og en glasskort vises over en anpasselig bakgrund, så du kan se resultatet mens du justerer det.

1. Ved ønske kan du klikke på en fordefineret stil (Frosted Glass, Dark Glass, Vintage, Inverted) for at starte med en udvalgt udseende. 2. Træk sliderene i Kontrollpanelet; hver filter vises kun i den genererede CSS, når den skiller sig fra sin standardværdi (f.eks. lyshed/kontrast/mængde/gennemsigtighed har standardværdi 100, uskydning har standardværdi 0). 3. Redigér feltet Background med hvilken gyldig CSS-backgroundværdi som helst (gradient, billedurl, farve) for at prøve filteret på forskellig kunst. 4. Klik på Kopier for at kopiere både deklarationerne backdrop-filter og -webkit-backdrop-filter.

Blur 0–50px; lyshed 0–200% (standard 100); kontrast 0–200% (standard 100); gråskala 0–100%; hue-rotate 0–360deg; invert 0–100%; gennemsigtighed 0–100% (standard 100); mængde 0–200% (standard 100); sepia 0–100%. Tilbakestillinger sætter alle slidere til deres standardværdier. Filter med deres neutrale værdier bliver utelat fra resultatet; hvis alle er neutrale, er resultatet backdrop-filter: none.