Vad är CSS-filter?

Med CSS-filter kan du använda grafiska effekter som oskärpa eller färgskiftning på ett element. De används ofta för bilder, bakgrunder och ramar.

Filter kan användas för att skapa visuella effekter, förbättra bilder eller skapa unika designelement utan behov av externa bildredigeringsverktyg.

CSS-filteregenskaper som stöds

• blur()- Lägger till en gaussisk oskärpa på elementet.
• brightness()- Justerar elementets ljusstyrka.
• contrast()- Justerar elementets kontrast.
• grayscale()- Konverterar elementet till gråskala.
• hue-rotate()- Tillämpar en nyansrotation på elementet.
• invert()- Inverterar elementets färger.
• opacity()- Justerar elementets opacitet.
• saturate()- Mättar eller desaturerar elementet.
• sepia()- Omvandlar elementet till sepia.

Så här använder du filter

Med hjälp av CSS-koden som genereras av det här verktyget kan du tillämpa filter på vilket HTML-element som helst. Så här gör du:

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

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

Webbläsarkompatibilitet

CSS-filter stöds i stor utsträckning i moderna webbläsare, inklusive Chrome, Firefox, Safari, Edge och Opera. Äldre webbläsare som Internet Explorer stöder dem dock inte.