Ce sunt filtrele CSS?

Filtrele CSS vă permit să aplicați efecte grafice precum estomparea sau schimbarea culorii unui element. Sunt utilizate în mod obișnuit pentru imagini, fundaluri și chenare.

Filtrele pot fi folosite pentru a crea efecte vizuale, pentru a îmbunătăți imaginile sau pentru a crea elemente de design unice fără a fi nevoie de instrumente externe de editare a imaginilor.

Proprietăți de filtrare CSS acceptate

• blur()- Aplică o estompare gaussiană elementului.
• brightness()- Reglează luminozitatea elementului.
• contrast()- Reglează contrastul elementului.
• grayscale()- Convertește elementul în tonuri de gri.
• hue-rotate()- Aplică o rotație de nuanță elementului.
• invert()- Inversează culorile elementului.
• opacity()- Ajustează opacitatea elementului.
• saturate()- Saturează sau desaturează elementul.
• sepia()- Convertește elementul în sepia.

Cum se aplică filtrele

Folosind codul CSS generat de acest instrument, puteți aplica filtre oricărui element HTML. Iată cum:

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

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

Compatibilitatea browserului

Filtrele CSS sunt acceptate pe scară largă în browserele moderne, inclusiv Chrome, Firefox, Safari, Edge și Opera. Cu toate acestea, browserele mai vechi, cum ar fi Internet Explorer, nu le acceptă.