Glassmorphism is looking to be one of the hot new graphic design trends of 2021. These glassy UI elements use grain, transparency and colour to create slick interfaces that look easy on the eye.

However, the idea of using glassy backgrounds in interfaces isn’t new as over the last few years Microsoft’s big product, Windows, has taken on a design style which uses what they call ‘acrylic material’.

It’s a blurred, glassy interface style, and when used sensibly it can look clean, classy and gorgeously modern. Of course, it is also entirely fitting for a product called Windows.

They have an acrylic material design guide describing how the style should be used in Windows apps, but I thought I’d put together a Photoshop tutorial for anyone wanting to recreate this look in Adobe apps for interface mockups, or whatever.

A few examples I’ve made:

TL;DR – the basic recipe:

1. Background image
2. Gaussian blur
3. Luminosity blend
4. Colour blend
5. Noise with a soft light blend

Let’s get crackin’.

[ I’m using a photo by Eiliv-Sonas Aceron on Unsplash ]

The blur

1. Set up your guides to where you want the edges of your acrylic material to be
2. Duplicate your image by selecting its layer and pressing Ctrl + J (or Command + J on a Mac)
3. With the new image later selected go to Filter > Blur > Gaussian Blur and pick something fat. You’ll want to pick a value somewhere around 1/50th of your image’s resolution, so that would be a 100px blur for a 5000px wide image. Or as blurry as you can make it while still making out the basic forms.
4. Use the rectangular marquee selection tool to select the area within your guides that you’d like to apply the acrylic effect to
5. Click the ‘Add layer mask’ button right at the bottom of the layers panel:

That should get you something like this:

The Luminosity

6. Create a new layer (Ctrl + Shift + N) and set its blend mode to Luminosity
7. Pick a colour (hotkey I) from the image on the lighter end of the spectrum
8. Select the intended area of your acrylic material within the guides again and fill it with the colour (hotkey G). In this example I’ve used the colour #face9f.
9. Bring the layer opacity down to around 10% – 20%

Here’s where we’ve got to so far (I’ve turned off guides):

The luminosity blend should reduce contrast, both lightening the dark areas and darkening the light areas together. This evens out the lightness of the whole material, replicating the internal light scattering of translucent glass.

Experiment with the layer colour and opacity to see what you like best.

The colour tint

10. Duplicate the Luminosity layer and set the new layer’s blend mode to Colour (just above Luminosity)
11. Fill that layer with another colour picked from the image. The colour tone is key here, of course.
12. Reduce the opacity to somewhere between 10% and 40% and experiment with the colour tone. Perhaps open the Hue/Saturation window (Ctrl + U) and play around with the Hue slider to see what you get.

That gives us:

The noise

13. Duplicate the Colour layer and set its blend mode to Soft Light. Fill it with a mid grey.
14. Go to Filter > Noise > Add Noise and add a crazy load, like 100%. Select Gaussian distribution and tick ‘Monochromatic’.
15. Zoom in to the image at the edge between the acrylic and the sharp original image, at a darker area until you can see an area of the original image that contains noise, if possible.
16. Bring the layer opacity of your noise layer down to a level slightly above that of the original image for a subtly frosted and photographic look. I find 20% – %40 opacity works well.

Your layers should look like this:

Drumroll please…

Et voilà!