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.

there is a blur filter on CSS https://developer.mozilla.org/en-US/docs/Web/CSS/filter — Temani Afif, Sep 21 '18 at 18:09
That gets me partway there. I did try `filter:blur(16px)`, but not sure what's going on with the values for "Sunshine icon: 15" and "Checkered box: 34%" under the Background Blur section — user3183717, Sep 21 '18 at 18:12
the sunshine is probably a brithgness filter .. I think better consider another stackexchange website than SO ... probably look the design one and you will get an answer — Temani Afif, Sep 21 '18 at 18:25

101 Coding und Design · Answer 1 · 2023-01-23T14:26:08.297

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 starts at -50% and goes up to 150% from 100%.

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.

Ignacio Correia · Answer 2 · 2021-09-13T10:59:20.730

5

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.

edited Sep 13 '21 at 10:59

answered Oct 17 '18 at 10:59

Ignacio Correia

3,611
8
39
68

As @peterflynn we lack browser compatibility. You can change a chrome://flag that activates this feature and than visit apple.com to see the feature applied :) – Ignacio Correia Jan 30 '19 at 12:11
Update 2021, check here -> https://caniuse.com/?search=backdrop-filter – Ignacio Correia Jan 04 '21 at 19:42

score 1 · Answer 3 · answered Oct 02 '18 at 03:06

Have you tried having a look at XD's design specs feature? Adobe XD design specs let you and your collaborators view design specs published from Adobe XD, which enable you to inspect and comment on flows, measurements, and styles.

Click the share button in the upper right hand of XD, and click "Publish Design Specs"

Under "Export for", select "Web" (or "iOS" or "Android")

Go to the generated link, and select the blurred object on the artboard. You'll be able to see specific values in the right-hand Specs panel for the following filter properties:
- blur
- brightness
- opacity

That doesn't really answer the question. How would you translate "Blur 16, Brightness 15, Effect Opacity 34%" to css? — redbmk, Mar 26 '19 at 01:55

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

3 Answers3

Update Sept. 2021