CSS backdrop-filtergenerator

Bouw live backdrop-filter-CSS door schuifregelaars te slepen voor negen filterfuncties: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate en sepia. De uitvoer zendt zowel backdrop-filter als -webkit-backdrop-filter uit zodat het effect in moderne browsers werkt, en een glaskaart wordt gerenderd op een aanpasbare achtergrond zodat u het resultaat ziet terwijl u het bijstelt.

1. Klik optioneel op een preset (Frosted Glass, Dark Glass, Vintage, Inverted) om vanaf een verzorgde look te beginnen. 2. Sleep de schuifregelaars in het paneel Controls; elk filter verschijnt alleen in de gegenereerde CSS wanneer het afwijkt van de standaardwaarde (bijv. brightness/contrast/saturate/opacity standaard 100, blur standaard 0). 3. Bewerk het veld Background met elke geldige CSS-background-waarde (verloop, image-url, kleur) om het filter over verschillende achtergronden te testen. 4. Klik op Copy om zowel de backdrop-filter- als de -webkit-backdrop-filter-declaratie te kopiëren.

blur 0–50px; brightness 0–200% (standaard 100); contrast 0–200% (standaard 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (standaard 100); saturate 0–200% (standaard 100); sepia 0–100%. Reset herstelt elke schuifregelaar naar de standaardwaarde. Filters op hun neutrale waarde worden weggelaten uit de uitvoer; als alle neutraal zijn is de uitvoer backdrop-filter: none.