0

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:

enter image description here

Blurred rectangle XD setings:

enter image description here

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.

I tried filter: blur(16px) brightness(1.3) opacity(.34) but that does not give the desired effect -- also, while it does blur the <div> element of the box, the part of the background image that comes through does not get blurred, if that makes sense.

  • 2
  • I updated the jsfiddle in my comment below that other question(↑) — jsfiddle.net/lollero/DE4qn – Joonas Sep 21 '18 at 20:25
  • I am still unsure, from your notes concerning your CSS filter approach, why that didn't work. It certainly seems like it should work. – mayersdesign Sep 22 '18 at 6:14
  • 2
    @mayersdesign, sounded to me like he made an element on top of the image and used the blur filter on that. He didn't realize that XD does this in a way that affects what is below and does not reflect how blur works in css. — OP, the blur filter affects only the element you use it on and anything nested inside. If I wanted to use the blur filter, I'd probably do it similarly to my jsfiddle. Instead of showing another image, put the same bg inside the div as well and blur that. – Joonas Sep 22 '18 at 9:57
0

What you're looking for is backdrop-filter. You can achieve such effect using this code:

backdrop-filter:blur(amount in pixels);

You can see a working demo here.

*Beware that backdrop-filter doesn't work in Firefox!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.