CSS-filtergenerator
Bygg en omordningsbar kedja av CSS filter() och backdrop-filter() funktioner och förhandsgranska den live på ditt eget uppladdade foto, med en kopierbar CSS-rad och PNG-export.
🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.
Resultat
Varje CSS-filtergenerator låter dig stapla blur(), brightness(), contrast() och resten — men nästan ingen av dem låter ordningen spela roll, eftersom de flesta bara tillämpar filter i en fast sekvens. Den här är annorlunda: filterkedjan är en verklig, omordningsbar lista byggd med HTML5:s inbyggda dra-och-släpp, och att omordna två funktioner ändrar verkligen de renderade pixlarna, precis som i produktions-CSS. Blur-följt-av-hue-rotate ser annorlunda ut än hue-rotate-följt-av-blur, och nu kan du se varför innan du levererar det.
Ladda upp ditt eget foto och de nio kedjebara funktionerna — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert och drop-shadow — tillämpas live på det som en faktisk `filter` CSS-deklaration på ett `<img>`-element, inte en simulerad färgruta. Lägg till en funktion från väljaren, dra dess rad uppåt eller nedåt i listan för att ändra dess position i kedjan, justera dess skjutreglage, så uppdateras förhandsvisningen och den kopierbara `filter: ...;`-raden vid varje inmatning. Ta bort ett steg med dess egen knapp, direkt i raden.
En andra, mindre kedja bygger ett `backdrop-filter`-värde som tillämpas på en överlagringspanel placerad över förhandsvisningen, så att du kan se frostad glas-effekten — tekniken bakom moderna genomskinliga navigationsfält och modala bakgrunder — utan att röra den underliggande bildens egen filterkedja. Den fungerar även innan du laddar upp ett foto, mot den färgglada platshållarbakgrunden, så du kan ställa in en frostad paneldesign på några sekunder.
När förhandsvisningen ser rätt ut, kopiera CSS-koden direkt från utdatarutan eller exportera en riktig PNG: samma filtersträng skickas till egenskapen `ctx.filter` i en Canvas 2D-kontext — som använder identisk syntax som CSS-egenskapen `filter` — och canvasen konverteras till en nedladdningsbar fil med `canvas.toBlob()`. Den exporterade bilden matchar live-förhandsvisningen exakt, eftersom den produceras av samma filtersträng som körs genom samma renderingsprimitive. Allt sker lokalt i din webbläsare; ditt foto laddas aldrig upp någonstans.