CSS-filtergenerator
Bygg en ombeställningsbar 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.
Resultat
Varje CSS-filtergenerator låter dig stapla blur(), ljusstyrka(), contrast() och resten - men nästan ingen av dem låter ordningen spela roll, eftersom de flesta bara använder filter i en fast sekvens. Den här är annorlunda: filterkedjan är en riktig, omordnbar lista byggd med inbyggt HTML5-drag-och-släpp, och om du beställer två funktioner förändras verkligen de renderade pixlarna, precis som det skulle göra i produktions-CSS. Blur-then-then-hue-rotate ser annorlunda ut än nyans-rotate-sedan-oskärpa, och nu kan du se varför innan du skickar den.
Ladda upp ditt eget foto och de nio kedjebara funktionerna - oskärpa, ljusstyrka, kontrast, mätta, nyans-rotera, sepia, gråskala, invertera och skugga - 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 markeringen, dra dess rad uppåt eller nedåt i listan för att ändra dess position i kedjan, justera dess skjutreglage, och förhandsgranskningen och det kopierbara `filtret: ...;` uppdateras vid varje inmatning. Ta bort ett steg med en egen knapp, precis där i raden.
En andra, mindre kedja bygger ett `backdrop-filter`-värde som appliceras på en överläggspanel placerad över förhandsgranskningen, så att du kan se frostat glaseffekt – tekniken bakom moderna genomskinliga navigeringsfält och modala bakgrunder – utan att röra den underliggande bildens egen filterkedja. Det fungerar även innan du laddar upp ett foto, mot den färgglada platshållarbakgrunden, så att du kan slå in en frostad paneldesign på några sekunder.
När förhandsgranskningen ser rätt ut, kopiera CSS direkt från utdatarutan, eller exportera en riktig PNG: samma filtersträng skickas till en Canvas 2D-kontexts `ctx.filter`-egenskap – som använder identisk syntax som CSS-egenskapen `filter` – och duken konverteras till en nedladdningsbar fil med `canvas.toBlob()`. Den exporterade bilden matchar liveförhandsgranskningen exakt, eftersom den produceras av samma filtersträng som löper genom samma renderingsprimitiv. Allt händer lokalt i din webbläsare; ditt foto laddas aldrig upp någonstans.
Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.
Godkända format och regler
- Nio kedjebara filterfunktioner – oskärpa, ljusstyrka, kontrast, mätta, nyans-rotera, sepia, gråskala, invertera och skugga – var och en med sitt eget skjutreglage och inbyggt draghandtag.
- Liveförhandsvisningsbild med ett kopieringsbart filter som omedelbart uppdateras: CSS-linje, plus en mindre bakgrundsfilterkedja och demopanel för ett frostat glasutseende.
- PNG-export med ett klick återger det uppladdade fotot genom exakt samma filtersträng med Canvas 2D:s ctx.filter, som matchar förhandsvisningspixeln för pixel på skärmen.
Viktiga fördelar
Användningsfall
- • Kedjeoskärpa, ljusstyrka och nyansrotera på ett produktfoto, dra sedan nyans-rotera före oskärpa för att se den exakta renderingsskillnaden innan du övergår till CSS.
- • Bygg ett navigeringsfält i frostat glas med backdrop-filterkedjan och kopiera det färdiga backdrop-filter plus -webkit- reservraden.
- • Exportera en filtrerad PNG av ett uppladdat foto som matchar live CSS-förhandsgranskningen pixel för pixel, utan att någonsin ladda upp bilden till en server.
Betygsätt detta verktyg
