Generator CSS filter pentru imagini

Exemple de filtre CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Alb-negru Imaginea fără culori.

.element {
  filter: grayscale(100%);
}

Vintage Sepia cu contrast puțin mai mare, ca o fotografie veche.

.element {
  filter: brightness(105%) contrast(110%) saturate(80%) sepia(60%);
}

Culori vii Saturație mai mare pentru poze de produs sau peisaje.

.element {
  filter: contrast(110%) saturate(180%);
}

Estompat Fundal neclar pentru text sau ferestre modale.

.element {
  filter: blur(4px);
}

Negativ Culorile inversate.

.element {
  filter: invert(100%);
}

Nocturn Mai întunecat și mai puțin colorat.

.element {
  filter: brightness(55%) contrast(120%) saturate(60%);
}

Altă nuanță hue-rotate rotește toate culorile pe roata culorilor.

.element {
  filter: hue-rotate(160deg);
}

Color la hover Imaginile sunt alb-negru și își recapătă culoarea când treci cu mouse-ul.

.galerie img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.galerie img:hover {
  filter: none;
}

Cum folosești generatorul de filter CSS

Pornește de la un efect: alb-negru, vintage, contrast mare, estompat, negativ, nocturn sau culori vii.
Mută glisoarele: blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert și opacity.
Urmărește rezultatul pe ilustrație și copiază proprietatea filter. Filtrele lăsate la valoarea neutră nu apar în cod.

Funcțiile filter și unitățile lor

blur() primește o lungime, de exemplu 4px.
brightness(), contrast() și saturate() primesc procente sau numere; 100% (sau 1) înseamnă neschimbat și pot trece de 100%.
grayscale(), sepia(), invert() și opacity() merg de la 0% la 100%.
hue-rotate() primește un unghi, de exemplu 90deg, și rotește toate nuanțele pe roata culorilor.

.foto-vintage {
  filter: sepia(60%) contrast(110%) brightness(95%) saturate(80%);
}

Ordinea contează: funcțiile se aplică una după alta, de la stânga la dreapta. drop-shadow() urmat de blur() estompează și umbra; invers, umbra rămâne clară.

drop-shadow și backdrop-filter

drop-shadow() desenează o umbră după forma reală a conținutului, de exemplu după pixelii unei imagini PNG cu fundal transparent, nu după dreptunghiul elementului ca box-shadow.

filter modifică elementul însuși. backdrop-filter modifică ce se vede în spatele lui și e baza efectului de sticlă mată din generatorul de glassmorphism.

Efect la hover pe imagini

.galerie img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}
.galerie img:hover {
  filter: grayscale(0%);
}

Întrebări frecvente

Filtrele încetinesc pagina?

Pe câteva imagini, nu. blur() cu rază mare pe suprafețe mari sau animat continuu poate fi costisitor, mai ales pe telefoane.

De ce s-a mutat un element cu position: fixed după ce am pus filter?

Orice filter diferit de none face din element blocul de referință pentru descendenții cu position: fixed, care se poziționează atunci față de el, nu față de fereastră.