Search code examples
javauser-interfacejavafxbluradobe-xd

Create Adobe XD background blur effect in Java

I have prototyped part of my application in Adobe XDDesktop render

And now it is time to recreate that frosted glass effect in Java. However, the closest I could get is the followingenter image description here

As the more keen-eyed of you might see...it looks bad, and nothing like my design.

I achieved the look below by taking a screenshot of the relevant part of the screen and applying a gaussian blur to the Image. I have no idea how to achieve the above look so any help would be greatly appreciated. Below you can see my code thus far

Robot robot = new Robot();

Toolkit myToolkit = Toolkit.getDefaultToolkit();
Dimension screenSize = myToolkit.getScreenSize();

Rectangle screen = new Rectangle(screenSize);

BufferedImage screenBlurImage = robot.createScreenCapture(screen);
//get relevant section
screenBlurImage = screenBlurImage.getSubimage(457,415,1006,107);
//set image
image.setImage(screenBlurImage);
//Apply blur
BoxBlur bb = new BoxBlur();
bb.setWidth(5);
bb.setHeight(5);
bb.setIterations(3);

image.setImage(SwingFXUtils.toFXImage(screenBlurImage, null ));

image.setEffect(bb);
Solution

  • I ended up exporting the Adobe XD Design as an HTML Webpage and rendering it using a JavaFX Webview with transparent background, turns out the way Adobe XD blurs backgrounds is by using the following CSS options: 

    box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.5);
filter: blur(13px);