CSS-filtergenerator
Bouw een herordenbare keten van CSS filter()- en backdrop-filter()-functies en bekijk deze live op je eigen geüploade foto, met een kopieerbare CSS-regel en PNG-export.
🔒 Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Elke CSS-filtergenerator laat je blur(), brightness(), contrast() en de rest stapelen — maar bijna geen enkele laat de volgorde ertoe doen, omdat de meeste filters slechts in één vaste volgorde toepassen. Deze is anders: de filterketen is een echte, herordenbare lijst gebouwd met native HTML5-slepen en -neerzetten, en het herordenen van twee functies verandert de pixels echt, precies zoals in productie-CSS. Blur-dan-hue-rotate ziet er anders uit dan hue-rotate-dan-blur, en nu kun je zien waarom voordat je het uitbrengt.
Upload je eigen foto en de negen combineerbare functies — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert en drop-shadow — worden er live op toegepast als een echte `filter`-CSS-declaratie op een `<img>`-element, niet als een gesimuleerd staaltje. Voeg een functie toe vanuit de selectie, sleep de rij omhoog of omlaag in de lijst om de positie in de keten te veranderen, pas de schuifregelaar aan en de preview en de kopieerbare `filter: ...;`-regel worden bij elke invoer bijgewerkt. Verwijder een stap met een eigen knop, direct in de rij.
Een tweede, kleinere keten bouwt een `backdrop-filter`-waarde die wordt toegepast op een overlaypaneel dat over de preview is geplaatst, zodat je het matglaseffect kunt zien — de techniek achter moderne doorschijnende navigatiebalken en modale achtergronden — zonder de eigen filterketen van de onderliggende afbeelding aan te raken. Het werkt zelfs voordat je een foto uploadt, tegen de kleurrijke plaatsvervangende achtergrond, zodat je in enkele seconden een matglaspaneelontwerp kunt afstellen.
Kopieer de CSS rechtstreeks uit het uitvoerveld wanneer de preview er goed uitziet, of exporteer een echte PNG: dezelfde filterstring wordt overhandigd aan de eigenschap `ctx.filter` van een Canvas 2D-context — die exact dezelfde syntaxis gebruikt als de CSS-eigenschap `filter` — en het canvas wordt omgezet naar een downloadbaar bestand met `canvas.toBlob()`. De geëxporteerde afbeelding komt exact overeen met de live preview, omdat deze wordt geproduceerd door dezelfde filterstring via dezelfde weergaveprimitief. Alles gebeurt lokaal in je browser; je foto wordt nergens geüpload.