Backdrop Filter Blur vs Filter Blur

Just like in Figma, in CSS we have two properties to apply blur to elements. Although they produce the same effect, they differ in their applications.

backdrop-filter: blur

This property adds blur to the background of an element. The elements inside the parent element are not affected by the changes. The element needs to be transparent or partially transparent for the effect to work.

CSS syntax:

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

In figma:

Effects > Background blur

filter: blur

The filter: blur applies the effect to the entire element, including its child elements. It is commonly used for images and SVGs with the <feGaussianBlur> tag.

CSS syntax:

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>

In figma:

Effects > Layer Blur

These effects can cause confusion during the hand-off from Figma to code. Using them correctly ensures there are no differences in the final element.

This note was originally published in Portuguese.