Funzione blur

La funzione blur permette di sfocare le immagini di sfondo secondo Gauss.

Sintassi

selettore {
	filter: blur(dimensione_sfocatura);
}

Esempio

Impostiamo una sfocatura di 2px per la nostra immagine:

<div id="elem"></div>

#elem {
	filter: blur(2px);
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedi anche

funzione brightness,
che imposta la luminosità dello sfondo
funzione contrast,
che imposta il contrasto dello sfondo
funzione drop-shadow,
che imposta l'ombra dello sfondo
funzione hue-rotate,
che imposta la tonalità di colore dello sfondo
funzione invert,
che inverte i colori dello sfondo
funzione opacity,
che imposta la trasparenza dello sfondo
funzione sepia,
che trasforma lo sfondo in seppia
proprietà background,
che è una proprietà abbreviata per lo sfondo
proprietà background-image,
con cui si può impostare un'immagine di sfondo per un blocco
proprietà filter,
che imposta lo stile per lo sfondo