Generator de filtre CSS
Creați și vizualizați filtre de imagine CSS personalizate
Preview
CSS Code
Comenzi de filtrare
Filtre populare
Vintage
Neon Glow
Polaroid
Film de epocă
Artă digitală
Cum se utilizează filtrele CSS
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:
1. Selectați un element
Alegeți elementul HTML căruia doriți să aplicați filtrul. Aceasta ar putea fi o imagine, un fundal sau orice alt element.
2. Adăugați o clasă sau un ID
Dacă elementul nu are deja o clasă sau un ID, adăugați unul pentru a facilita direcționarea cu CSS.
3. Aplicați filtrul
Utilizați CSSfilterdin foaia de stil sau stilul în linie pentru a aplica filtrul generat.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Combinați mai multe filtre
Puteți combina mai multe funcții de filtrare listându-le una după alta, separate de spații.
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ă.
Related Tools
Înfrumusețător CSS
Formatați și înfrumusețați codul CSS cu precizie profesională
Convertor SCSS în CSS
Transformați-vă codul SCSS în CSS. Rapid, ușor și sigur.
Generați transformări CSS3 cu ușurință
Un instrument puternic și intuitiv pentru crearea de transformări CSS3 complexe fără a scrie cod. Vizualizați modificările în timp real și copiați CSS-ul generat pentru a-l utiliza în proiectele dvs.
Convertor de unități de masă
Convertiți între diferite unități de masă cu precizie pentru nevoile dumneavoastră științifice și de zi cu zi
Hex în zecimal
Convertiți numere hexazecimale în zecimale fără efort
Convertiți TSV în JSON fără efort
Transformați-vă datele TSV în format JSON structurat cu un singur clic. Rapid, sigur și complet bazat pe browser.