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
Convertor Stylus î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.
Creați machete Flexbox perfecte
Vizualizați, personalizați și generați cod CSS flexbox cu interfața noastră intuitivă drag-and-drop.
SHA-1 Hash Calculator
Generați hash-uri SHA-1 rapid și ușor
Convertizor de debit volumetric
Convertiți debitul volumetric între diferite unități cu precizie și ușurință
Minimizare JSON
JSON redus reduce dimensiunea datelor, ceea ce înseamnă că acestea pot fi transferate mai rapid prin rețea