Generatore di Filtri CSS

Le funzioni di filtro

L’ordine di concatenazione è importante

filter: brightness(0.5) saturate(2) applica prima la luminosità, poi la saturazione, i due filtri si combinano.

filter: saturate(2) brightness(0.5) applica prima la saturazione. Poiché l’immagine è più luminosa prima di essere scurita, la saturazione del colore è più pronunciata.

La differenza visiva è sottile ma reale. Prova entrambi gli ordini quando una catena di filtri non appare come ti aspettavi.

Ricette comuni

/* Aspetto foto sbiadita */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / sbiadito */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Approssimazione duotone */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Eroe scuro */
filter: brightness(0.6);

/* Stato disabilitato */
filter: grayscale(1) opacity(0.6);

/* Vetro / sovrapposizione smerigliata */
filter: blur(12px) saturate(1.3);

backdrop-filter per vetro smerigliato

filter si applica all’elemento stesso; backdrop-filter si applica a ciò che c’è dietro un elemento semi-trasparente, l’effetto vetro smerigliato popolarizzato da iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Supporto: tutti i browser moderni; Firefox finalmente lo supporta senza flag in 103+.

Note sulle prestazioni

• blur() è il filtro più costoso perché richiede di convolvere ogni pixel con un kernel. Una sfocatura di 30px su un’immagine hero 4K costa veri frame.
• grayscale, sepia, brightness e simili sono trasformazioni di colore per pixel, economiche.
• I filtri sono accelerati dalla GPU nei browser moderni, ma animare blur() è ancora scattoso su dispositivi di fascia bassa.
• Preferisci will-change: filter prima di animare.

filter: drop-shadow() vs. box-shadow

• box-shadow segue il border-box dell’elemento (rispetta border-radius).
• filter: drop-shadow() segue i pixel non trasparenti dell’elemento, il che significa che traccia le forme di clip-path, la trasparenza PNG e i percorsi SVG.

Per le ombre su immagini ritagliate o trasparenti, usa drop-shadow. Per schede e scatole standard, box-shadow è più veloce.