Backdrop Filter Blur e Filter Blur

Backdrop Filter Blur e Blur

Assim como no figma, no css temos 2 propriedades pra aplicar o blur em elementos. Apesar de aplicarem o mesmo efeito, eles tem diferenças nas aplicações.

backdrop-filter: blur

Essa propriedade adiciona o blur no background do elemento. Os elementos que ficam dentro do elemento pai, não sofrem as alterações. Ele precisa ser transparente ou parcialmente transparente para surtir o efeito.

Sintaxe do css:

.element {
	backdrop-filter: blur(10px);
}

No figma:

Effects > Background blur

filter: blur

O filter: blur aplica o efeito em todo elemento juntamente com os elementos filhos. Geralmente é usado em imagens e em svg com a tag <feGaussianBlur>.

Sintaxe do css:

img {
	filter: blur(10px);
	filter: url(#blur); /* embedded SVG */
	filter: url(folder/file.svg#blur); /* svg externo */
}

Em svg:

<svg role="none">
	<filter id="blur">
		<feGaussianBlur stdDeviation="10" edgeMode="duplicate" />
	</filter>
</svg>

No figma:

Effects > Layer Blur

Esses efeitos podem causar confusão na hora de fazer o hand-off do figma para o código. Usando elas da forma correta, você garante que não vai ter diferenças no elemento final.