CSS equivalent to Adobe XD's "Background Blur" feature?

Question

Developing a page based on an Adobe XD comp.

Since Adobe XD doesn't let you export CSS, I've been hand-coding each element's CSS attributes.

I'm trying to figure out what would be the CSS equivalents for the following screenshots.

Blurred rectangle with un-blurred text on top:

Blurred rectangle XD setings:

Based on the "Fill" and "81%", it's easy enough to grab the HEX value, convert it to RGB, then write background-color: rgba(54,93,62,0.81), but I have no idea what the equivalent CSS would be for the "Background Blur" settings.

Answer 1

I had the same question and i would translate it like this:

XD:
Background color: RGB(54, 93, 62)
Blur: 16
Brightness: 15
Effect Opacity: 34%

CSS:

background-color: rgba(54, 93, 62, 0.34);
backdrop-filter: blur(16px) brightness(115%);

The blur stays in pixel.

The brightness in XD is -50 to +50. I would say it goes from -50% to -50% from 100% so its the same interval as 50% to 150%.

The effect opacity in XD is at 0% without color and with 100% full color. So its the same as setting the opacity of the background-color from 0 to 1.

Answer 2

It is:

   -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5); 

Demo: https://codepen.io/igcorreia/pen/YJeQgb

Make sure you check browser compatibility. As of early 2019 this is not supported in Chrome or Firefox - so for now you may need to export a flattened image with the blur built into it.

Update Sept. 2021

Check Browser Compatibility https://www.caniuse.com/?search=backdrop-filter

The simplest is:

backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5); 

Note, the background color must be 50%, 20% or 10% transparent in order for you to see the effect.

Firefox is still lacking behind on this effect.