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.
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.