Hva er CSS-filtre?

CSS-filtre lar deg bruke grafiske effekter som uskarphet eller fargeforskyvning på et element. De brukes ofte til bilder, bakgrunner og kantlinjer.

Filtre kan brukes til å lage visuelle effekter, forbedre bilder eller lage unike designelementer uten behov for eksterne bilderedigeringsverktøy.

Støttede CSS-filteregenskaper

• blur()- Bruker en gaussisk uskarphet på elementet.
• brightness()- Justerer lysstyrken på elementet.
• contrast()- Justerer kontrasten til elementet.
• grayscale()- Konverterer elementet til gråtoner.
• hue-rotate()- Bruker en fargetonerotasjon på elementet.
• invert()- Inverterer fargene på elementet.
• opacity()- Justerer tettheten til elementet.
• saturate()- Metter eller avmetner elementet.
• sepia()- Konverterer elementet til sepia.

Slik bruker du filtre

Ved å bruke CSS-koden generert av dette verktøyet, kan du bruke filtre på et hvilket som helst HTML-element. Slik gjør du det:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Webleserkompatibilitet

CSS-filtre støttes mye i moderne nettlesere, inkludert Chrome, Firefox, Safari, Edge og Opera. Eldre nettlesere som Internet Explorer støtter dem imidlertid ikke.