CSS-filtergenerator
Bygg en omorganiserbar kjede av CSS-filter()- og bakgrunnsfilter()-funksjoner og forhåndsvis det live på ditt eget opplastede bilde, med en kopierbar CSS-linje og PNG-eksport.
Resultat
Hver CSS-filtergenerator lar deg stable uskarphet(), lysstyrke(), kontrast() og resten - men nesten ingen av dem lar rekkefølgen ha betydning, fordi de fleste bare bruker filtre i én fast sekvens. Denne er annerledes: filterkjeden er en ekte, omorganiserbar liste bygget med native HTML5 dra-og-slipp, og ombestilling av to funksjoner endrer virkelig de gjengitte piksler, akkurat som det ville gjort i produksjons-CSS. Blur-then-hue-rotate ser annerledes ut enn hue-rotate-then-blur, og nå kan du se hvorfor før du sender den.
Last opp ditt eget bilde og de ni kjedebare funksjonene – uskarphet, lysstyrke, kontrast, mett, fargetone-roter, sepia, gråtoner, invert og drop-shadow – gjelder live på det som en faktisk "filter" CSS-erklæring på et "<img>"-element, ikke en simulert fargeprøve. Legg til en funksjon fra valget, dra raden opp eller ned i listen for å endre posisjonen i kjeden, juster glidebryteren, og forhåndsvisningen og det kopierbare `filteret: ...;`-linjen oppdateres på hver inndata. Fjern et trinn med sin egen knapp, rett der i raden.
En andre, mindre kjede bygger en "bakgrunnsfilter"-verdi brukt på et overleggspanel plassert over forhåndsvisningen, slik at du kan se frostet glass-effekten – teknikken bak moderne gjennomskinnelige navigasjonslinjer og modale bakgrunner – uten å berøre det underliggende bildets egen filterkjede. Det fungerer selv før du laster opp et bilde, mot den fargerike plassholderbakgrunnen, slik at du kan ringe inn et frostet paneldesign på sekunder.
Når forhåndsvisningen ser riktig ut, kopier CSS rett fra utdataboksen, eller eksporter en ekte PNG: den samme filterstrengen leveres til en Canvas 2D-konteksts `ctx.filter`-egenskap – som bruker den identiske syntaksen som CSS `filter`-egenskapen – og lerretet konverteres til en nedlastbar fil med `canvas.toBlob()`. Det eksporterte bildet samsvarer nøyaktig med live-forhåndsvisningen, fordi det er produsert av den samme filterstrengen som går gjennom den samme primitive gjengivelsen. Alt skjer lokalt i nettleseren din; bildet ditt blir aldri lastet opp noe sted.
Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.
Godkjente formater og regler
- Ni kjedebare filterfunksjoner – uskarphet, lysstyrke, kontrast, mett, nyanserotering, sepia, gråtoner, inverter og skygge – hver med sin egen glidebryter og native drahåndtak.
- Live forhåndsvisningsbilde med et kopierbart filter som oppdateres umiddelbart: CSS-linje, pluss en mindre bakgrunnsfilterkjede og demopanel for et frostet glass-utseende.
- Ett-klikks PNG-eksport gjengir det opplastede bildet gjennom nøyaktig samme filterstreng med Canvas 2Ds ctx.filter, som matcher forhåndsvisningspikselen for piksel på skjermen.
Viktige fordeler
Brukssaker
- • Kjedesløring, lysstyrke og nyanseroter på et produktbilde, og dra deretter nyanserotering før uskarphet for å se den nøyaktige gjengivelsesforskjellen før du forplikter deg til CSS.
- • Bygg et navigasjonsfeltoverlegg i frostet glass med bakgrunnsfilterkjeden og kopier den klare backdrop-filter pluss -webkit- reservelinjen.
- • Eksporter en filtrert PNG av et opplastet bilde som samsvarer med live CSS-forhåndsvisningspiksel for piksel, uten noen gang å laste opp bildet til en server.
Vurder dette verktøyet
