CSS Suodatingeneraattori
Luo CSS-suodatinefektejä visuaalisesti. Säädä sumennus, kirkkaus, kontrasti, harmaasävy, sävykierto, käänteisyys, peittävyys, kylläisyys ja seepia live-esikatselun kanssa. Ilmainen.
Tai vedä kuva esikatseluun
Viite
Mikä on CSS filter -ominaisuus?
CSS-ominaisuus filter soveltaa graafisia efektejä kuten sumennusta, värinmuutosta ja kontrastin säätöä elementtiin.
Kaikki CSS-suodatinfunktiot
blur(px): Soveltaa Gaussin sumennusta.
brightness(%): Säätää kirkkautta.
contrast(%): Säätää kontrastia.
grayscale(%): Muuntaa harmaasävyksi.
hue-rotate(deg): Kiertää värejä.
invert(%): Kääntää värit.
opacity(%): Säätää läpinäkyvyyttä.
saturate(%): Säätää värikylläisyyttä.
sepia(%): Soveltaa seepiasävyä.
Suorituskykynäkökohdat
CSS-suodattimet ovat GPU-kiihdytettyjä moderneissa selaimissa. Käytä will-change: filter animoitavissa elementeissä.
Yleiset käyttötapaukset
Kuvan hover-efektit — harmaasävy levossa, väri hoverissa.
Poistettu käytöstä -tila — filter: grayscale(100%) opacity(50%).
Tumma tila — filter: invert(1) hue-rotate(180deg).
Tietosuoja
Kaikki suodattimien luonti suoritetaan 100% selaimessasi. Tietoja ei lähetetä palvelimelle.