Što su CSS filtri?

CSS filtri omogućuju vam primjenu grafičkih efekata poput zamućenja ili promjene boje na element. Obično se koriste za slike, pozadine i obrube.

Filtri se mogu koristiti za stvaranje vizualnih efekata, poboljšanje slika ili stvaranje jedinstvenih elemenata dizajna bez potrebe za vanjskim alatima za uređivanje slika.

Podržana svojstva CSS filtra

• blur()- Primjenjuje Gaussovo zamućenje na element.
• brightness()- Podešava svjetlinu elementa.
• contrast()- Podešava kontrast elementa.
• grayscale()- Pretvara element u sive tonove.
• hue-rotate()- Primjenjuje rotaciju nijanse na element.
• invert()- Obrće boje elementa.
• opacity()- Podešava neprozirnost elementa.
• saturate()- Zasićuje ili desaturira element.
• sepia()- Pretvara element u sepiju.

Kako primijeniti filtre

Koristeći CSS kod koji generira ovaj alat, možete primijeniti filtre na bilo koji HTML element. Evo kako:

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

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

Kompatibilnost preglednika

CSS filtri široko su podržani u modernim preglednicima, uključujući Chrome, Firefox, Safari, Edge i Opera. Međutim, stariji preglednici poput Internet Explorera ih ne podržavaju.