CSS backdrop-filter-generator

Bygg live backdrop-filter CSS genom att dra reglage för nio filterfunktioner: oskärpa, ljusstyrka, kontrast, gråskala, färgrotering, invertering, opacitet, mättnad och sepia. Utmatningen ger ut både backdrop-filter och -webkit-backdrop-filter så effekten fungerar över moderna webbläsare och ett glaskort renderas över en anpassningsbar bakgrund så att du kan se resultatet när du ställer in det.

1. Klicka valfritt på en preset (Frostat glas, Mörkt glas, Vintage, Inverterat) för att starta från en utvald look. 2. Dra reglagen i kontrollpanelen; varje filter visas bara i den genererade CSS:en när den skiljer sig från sin standard (t.ex. ljusstyrka/kontrast/mättnad/opacitet standard till 100, oskärpa standard till 0). 3. Redigera bakgrundsfältet med valfritt giltigt CSS-bakgrundsvärde (gradient, bild-url, färg) för att testa filtret över olika konst. 4. Klicka på Kopiera för att kopiera både backdrop-filter och -webkit-backdrop-filter-deklarationer.

oskärpa 0–50px; ljusstyrka 0–200% (standard 100); kontrast 0–200% (standard 100); gråskala 0–100%; färgrotering 0–360deg; invertering 0–100%; opacitet 0–100% (standard 100); mättnad 0–200% (standard 100); sepia 0–100%. Återställ återställer alla reglage till sin standard. Filter vid sitt neutrala värde utelämnas från utmatningen; om alla är neutrala är utmatningen backdrop-filter: none.