⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS-filtergenerator

Bygg en omorganiserbar kjede av CSS filter()- og backdrop-filter()-funksjoner og forhåndsvis den direkte på ditt eget opplastede bilde, med en kopierbar CSS-linje og PNG-eksport.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

🖼️

Dra og slipp bilde her

eller Klikk for å bla gjennom filer

Last opp et bilde ovenfor for å forhåndsvise filterkjeden din her. Demoen for frostet glass-backdrop-filter fungerer selv uten et.

Behandler … 0%

Resultat

Alle CSS-filtergeneratorer lar deg stable blur(), brightness(), contrast() og resten – men nesten ingen av dem lar rekkefølgen ha noe å si, fordi de fleste bare bruker filtre i én fast sekvens. Denne er annerledes: Filterkjeden er en ekte, omorganiserbar liste bygget med innebygd HTML5 dra-og-slipp, og omorganisering av to funksjoner endrer faktisk de gjengitte pikslene, nøyaktig slik det ville vært i produksjons-CSS. Blur-så-hue-rotate ser annerledes ut enn hue-rotate-så-blur, og nå kan du se hvorfor før du sender det ut.

Last opp ditt eget bilde, og de ni kjedbare funksjonene – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert og drop-shadow – blir brukt direkte på det som en faktisk `filter` CSS-deklarasjon på et `<img>`-element, ikke en simulert fargeprøve. Legg til en funksjon fra menyen, dra raden opp eller ned i listen for å endre posisjonen i kjeden, juster glidebryteren, så oppdateres forhåndsvisningen og den kopierbare `filter: ...;`-linjen ved hver inndata. Fjern et trinn med sin egen knapp, rett der i raden.

En andre, mindre kjede bygger en `backdrop-filter`-verdi som brukes på et overleggspanel plassert over forhåndsvisningen, slik at du kan se frostet glass-effekten – teknikken bak moderne, gjennomskinnelige navigasjonsfelt og modalbakgrunner – uten å røre det underliggende bildets egen filterkjede. Den fungerer selv før du laster opp et bilde, mot den fargerike plassholderbakgrunnen, slik at du kan finjustere et frostet paneldesign på sekunder.

Når forhåndsvisningen ser riktig ut, kopier CSS-en rett fra utdataboksen, eller eksporter en ekte PNG: Det samme filteruttrykket gis til en Canvas 2D-konteksts `ctx.filter`-egenskap – som bruker identisk syntaks som CSS `filter`-egenskapen – og lerretet konverteres til en nedlastbar fil med `canvas.toBlob()`. Det eksporterte bildet samsvarer nøyaktig med direktesforhåndsvisningen, fordi det er produsert av det samme filteruttrykket som kjøres gjennom den samme gjengivelsesprimtiven. Alt skjer lokalt i nettleseren din; bildet ditt blir aldri lastet opp noe sted.

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

  • Ni kjedbare filterfunksjoner – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert og drop-shadow – hver med sin egen glidebryter og innebygde drahåndtak.
  • Direkte forhåndsvisningsbilde med en umiddelbart oppdaterende, kopierbar filter: CSS-linje, pluss en mindre backdrop-filter-kjede og demopanel for frostet glass-utseendet.
  • Ett-klikks PNG-eksport gjengir det opplastede bildet gjennom nøyaktig det samme filteruttrykket med Canvas 2Ds ctx.filter, og samsvarer piksel for piksel med forhåndsvisningen på skjermen.

Viktigste fordeler

✓ Dra-og-slipp-omorganiseringen er reell: Å flytte et filter tidligere eller senere i kjeden endrer faktisk det gjengitte resultatet, noe generatorer med fast rekkefølge ikke kan vise deg.
✓ Direkteforhåndsvisningen kjører på ditt eget opplastede bilde i stedet for en generisk fargeprøve, slik at du ser nøyaktig hvordan filterkjeden oppfører seg på ekte innhold før du sender CSS-en.
✓ En separat backdrop-filter-kjede demonstrerer frostet glass-effekten på et overleggspanel, og PNG-eksporten baker det samme filteruttrykket inn i et nedlastbart bilde via Canvas 2D.

Bruksområder

  • • Lenk sammen uskarphet, lysstyrke og fargedreiing på et produktbilde, og dra fargedreiing foran uskarphet for å se nøyaktig hvordan gjengivelsen endrer seg før du låser CSS-en.
  • • Bygg en frostet glass-overlegg for navigasjonsfeltet med en backdrop-filter-kjede og kopier den ferdige backdrop-filter-linjen med -webkit-fallback.
  • • Eksporter et filtrert PNG-bilde av et opplastet foto som matcher den levende CSS-forhåndsvisningen piksel for piksel, uten å laste opp bildet til en server.