CSS Filter-generator
Generera CSS-filtereffekter visuellt. Justera oskärpa, ljusstyrka, kontrast, gråskala, färgrotation, invertering, opacitet, mättnad och sepia med live förhandsgranskning. Gratis.
Eller dra en bild till förhandsgranskningen
Referens
Vad är CSS filter-egenskapen?
CSS-egenskapen filter applicerar grafiska effekter som oskärpa, färgförskjutning och kontrastjustering på ett element.
Alla CSS-filterfunktioner
blur(px): Applicerar gaussisk oskärpa.
brightness(%): Justerar ljusstyrka.
contrast(%): Justerar kontrast.
grayscale(%): Konverterar till gråskala.
hue-rotate(deg): Roterar färger.
invert(%): Inverterar färger.
opacity(%): Justerar genomskinlighet.
saturate(%): Justerar färgmättnad.
sepia(%): Applicerar sepiaton.
Prestandaöverväganden
CSS-filter är GPU-accelererade i moderna webbläsare. Använd will-change: filter på animerade element.
Vanliga användningsfall
Bild hover-effekter — gråskala i vila, färg vid hover.
Inaktiverat tillstånd — filter: grayscale(100%) opacity(50%).
Mörkt läge — filter: invert(1) hue-rotate(180deg).
Integritet
All filtergenerering körs 100% i din webbläsare. Ingen data skickas till någon server.