Differenza tra filtro CSS e SVG?

CSS filter fornisce effetti comuni semplificati. Il filtro SVG offre molto più potere con operazioni di compositing arbitrarie.

Generatore Filtri CSS

Crea effetti filtro CSS visivamente — blur, luminosità, contrasto, scala di grigi e altro.

9 funzioni filtroAnteprima liveUpload immagine

① Trascina i cursori per i filtri ② Carica la tua immagine ③ Copia il CSS

🖼Clicca per caricare un'immagine

Preset

filter: none

Luminosità

Contrasto

Saturazione

Scala di grigi

Seppia

Blur (px)

0px

Rotazione tonalità (deg)

0°

Inverti

Opacità

Output CSS

filter: none;

backdrop-filter (glassmorphism)

backdrop-filter: none;

Cos'è la proprietà CSS filter?

La proprietà CSS filter applica effetti grafici a qualsiasi elemento HTML — immagini, div, video, SVG o intere sezioni. Supporta nove funzioni: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() e saturate(). Più filtri si concatenano separati da spazio: filter: brightness(1.2) contrast(1.1) grayscale(0.3) — l'ordine è importante. La proprietà è accelerata GPU in tutti i browser moderni. Nota: filter crea un nuovo contesto di impilamento che può influire sul z-index degli elementi figli. Per overlay frosted-glass usa la proprietà correlata backdrop-filter.

Domande Frequenti

La proprietà CSS filter applica effetti visivi agli elementi. Supporta: blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity e saturate. Più funzioni possono essere combinate.

Sì. CSS filter funziona su qualsiasi elemento HTML, non solo immagini. Nota: filter crea un contesto di impilamento che può influire sul comportamento z-index degli elementi figli.

Elenca più funzioni filter separate da spazi: filter: brightness(1.2) contrast(1.1) blur(2px). L'ordine è importante — i filtri vengono applicati da sinistra a destra.

hue-rotate(Ndeg) sposta tutti i colori di un elemento attorno alla ruota dei colori di N gradi. 0deg = nessun cambiamento, 180deg inverte le tonalità.

CSS filter fornisce una serie semplificata di effetti comuni. Il filtro SVG offre molto più potere con operazioni di compositing arbitrarie. CSS filter è più semplice; SVG filter è più potente.

I filtri CSS attivano il compositing GPU. La maggior parte sono ben ottimizzati. blur() è il più costoso — grandi valori su elementi grandi possono causare cali di frame rate.

Combina sepia e contrast: filter: sepia(0.5) contrast(1.2) brightness(1.05). Per bianco e nero: filter: grayscale(1) contrast(1.1).

Cos'è la proprietà CSS filter?

Domande Frequenti

Esplora il Nostro Network