Menu
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.
376
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
Syntax. filter: blur(px); To apply a blur effect to the background image, with the blur function use the z-index property to set the stack order of the element, set the width and height 100% to have a full background image.
The blur function applies a blur effect to a specified input image, which you can then use with the “filter” property to blur an image.
The blur() function is an inbuilt function which is used to apply a blurred effect filter on the image. Parameters: This function accepts single parameter radius which holds the blur radius in form of length. This parameter defines the value of the standard deviation to the Gaussian function.
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.
104
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.
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
