CSS-filtergenerator
Byg en omarrangerbar kæde af CSS filter()- og backdrop-filter()-funktioner, og se den live på dit eget uploadede foto – med en kopierbar CSS-linje og PNG-eksport.
🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.
Resultat
Enhver CSS-filtergenerator lader dig stable blur(), brightness(), contrast() og resten – men næsten ingen af dem lader rækkefølgen have betydning, for de fleste anvender kun filtre i én fast sekvens. Denne her er anderledes: filterkæden er en ægte, omarrangerbar liste bygget med native HTML5 drag-and-drop, og hvis du ændrer rækkefølgen af to funktioner, ændres de gengivne pixels faktisk, præcis som i produktions-CSS. Blur-efter-hue-rotate ser anderledes ud end hue-rotate-efter-blur, og nu kan du se hvorfor, inden du sender det afsted.
Upload dit eget foto, og de ni kædebare funktioner – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert og drop-shadow – anvendes live på det som en ægte `filter` CSS-deklaration på et `<img>`-element, ikke en simuleret farveprøve. Tilføj en funktion fra vælgeren, træk rækken op eller ned i listen for at ændre placeringen i kæden, justér skyderen, og både forhåndsvisningen og den kopierbare `filter: ...;`-linje opdateres ved hvert input. Fjern et trin med dets egen knap, lige der i rækken.
En anden, mindre kæde bygger en `backdrop-filter`-værdi, som anvendes på et overlay-panel, der ligger oven på forhåndsvisningen, så du kan se frostet glas-effekten – teknikken bag moderne gennemsigtige navigationsbjælker og modale baggrunde – uden at røre ved selve billedets filterkæde. Det virker selv uden et uploadet foto, hen over den farverige pladsholder-baggrund, så du kan finjustere et frostet panel-design på sekunder.
Når forhåndsvisningen ser rigtig ud, kan du kopiere CSS'en direkte fra output-boksen eller eksportere en ægte PNG: den samme filterstreng gives til en Canvas 2D-konteksts `ctx.filter`-egenskab – som bruger identisk syntaks med CSS-egenskaben `filter` – og canvas'en konverteres til en downloadbar fil med `canvas.toBlob()`. Det eksporterede billede matcher live-forhåndsvisningen nøjagtigt, for det er skabt af den samme filterstreng, der kører gennem den samme renderingsprimitive. Alt foregår lokalt i din browser; dit foto uploades aldrig nogen steder.