1

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.

Improve this question
4
  • 2
    Possible duplicate of How to create a non-destructive and reusable blurred/frosted glass effect?
    – Joonas
    Sep 21, 2018 at 19:33
  • I updated the jsfiddle in my comment below that other question(↑) — jsfiddle.net/lollero/DE4qn
    – Joonas
    Sep 21, 2018 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, 2018 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, 2018 at 9:57

1 Answer 1

Reset to default
1

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!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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