How to Create a Glassmorphism Icon in Photoshop

Create a transparent UI cloud icon in Photoshop

Glassmorphism is new variation of the recent UI trend Neumorphism, which itself is a variation of Skeuomorphism. Glassmorphism combines the trends of depth and tactile feel found in other 'morphisms with a transparent glass-like aesthetic. This tutorial will teach you how to make a Glassmorphism styled cloud icon using simple shapes, layer styles, smart objects and filters in Photoshop.

Step 1

Launch Photoshop and create a new document (File > New...)

• Width: 512 px
• Height: 512 px
• Resolution: 72 px

Step 3

Go to Layer > New Fill Layer > Solid Color... and click OK

In the next window enter #E9FFFC and click OK

(Optional) name the layer 'Background Color'

Step 4

Use the Rounded Rectangle Tool (U) to draw a square on the canvas

• X: 88 px
• Y: 133 px
• Width: 306 px
• Height: 306 px
• Corner Radius: 50 px

Step 5

Double click on the rounded rectangle layer to show the Layer Styles panel. 

In Blending Options:

• Opacity: 50%
• Fill Opacity: 0%

Step 6

Click the checkmark next to Bevel and Emboss and use the following settings:

• Style: Inner Bevel
• Technique: Smooth
• Depth: 100%
• Angle: 90º
• Altitude: 30º
• Size: 6 px
• Soften: 0 px
• Highlight Mode: Linear Burn (Black)
• Highlight Opacity: 15%
• Shadow Mode: Linear Burn (Black)
• Shadow Opacity: 15%

Step 7

Click the checkmark next to Inner Shadow and use the following settings:

• Blend Mode: Normal
• Color: White
• Opacity: 100%
• Angle: 90º
• Distance: 0 px
• Choke: 25%
• Size: 5 px

Step 8

Click the plus button next to Inner Shadow to add another instance and use the following settings:

• Blend Mode: Soft Light
• Color: Black
• Opacity: 100%
• Angle: 90º
• Distance: 0 px
• Choke: 0%
• Size: 10 px

Step 9

Click the checkmark next to Inner Glow and use the following settings:

• Blend Mode: Overlay
• Opacity: 100%
• Noise: 0%
• Color: White
• Technique: Softer
• Source: Center
• Size 161 px

Step 10

Click the checkmark next to Gradient Overlay and use the following settings:

• Blend Mode: Normal
• Opacity: 80%
• Gradient: #1F9EFF to 67DFD0
• Style: Linear
• Angle: 90º

The rounded rectangle layer should now look like the image below:

Step 11

Press CMD + J or CTRL + J to duplicate the rounded rectangle layer

Step 12

Double click on the duplicated rounded rectangle layer to show the Layer Styles panel. 

In Blending Options, change the Opacity to 100%

Step 13

In the Gradient Overlay section, change the Opacity to 100%.

Step 14

Now right click on the duplicated rounded rectangle layer and choose 'Convert to Smart Object'.

Step 15

Move the duplicated copy of the rounded rectangle down the layer order, so that it is below the original.

Rotate the duplicated copy by 15º and place it at:

• X: 121 px
• Y: 58 px

Step 16

With the background rounded rectangle selected, hold down the CMD or ALT key and click on the foreground rounded rectangle layer to make a selection.

Step 17

Click the Add layer mask at the bottom of the Layers window.

Step 18

Duplicate the background rectangle to make another copy of it.

Click on the layer mask thumbnail of the newly duplicated layer in the Layers window.

Press CMD + I or CTRL + I to invert the mask.

Step 19

Click the chain link icon on both of the background rounded rectangle layers to unlink the masks from the smart object layers.

Step 20

Select the bottom most rounded rectangle layer and then go to Filter > Blur > Gaussian Blur...

Enter these settings:

• Radius: 12.5 px

It should now appear as though the background rounded rectangle is blurred when it is behind the original rounded rectangle layer.

Step 21

Select the original rounded rectangle vector shape layer and press CMD + J or CTRL + J to create a duplicate.

• Fill Color: Black
• Opacity: 50%

Move the new layer down in the layer order below the top most (original) rounded rectangle layer.

Press CMD + T or CTRL + T to enter transform mode.

Resize and reposition the new layer:

• Width: 291 px
• Height: 291 px
• X: 95 px
• Y: 154 px

Step 22

Go to Window > Properties and click on the Masks icon in the upper left hand corner.

Set the Feather value to 5.0 px to create a blurred, shadow effect.

Step 23

With the shadow rounded rectangle layer still selected, hold down the CMD or ALT key and click on the foreground rounded rectangle layer to make a selection.

Click the Add layer mask at the bottom of the Layers window.

Press CMD + I or CTRL + I to invert the mask so that is is only visible outside/below the original rounded rectangle.

Step 24

Now we are going to create a simple cloud icon. Using the Ellipse Tool (U) hold down the shift key to draw a circle above all other layers.

• Color: White
• Width: 83 px
• Height: 83 px
• X: 123 px
• Y: 271 px

Step 25

Note: for the next few steps, keep the Direct Selection Tool active so that we are creating a single vector shape, alternatively you can create a separate layers, but you must group them or merge them together later on.

On the same layer, Press CMD + J or CTRL + J to duplicate the circle vector

• Width: 83 px
• Height: 83 px
• X: 165 px
• Y: 229 px

Step 26

On the same layer, Press CMD + J or CTRL + J to duplicate the circle vector

• Width: 112 px
• Height: 112 px
• X: 206 px
• Y: 201 px

Step 27

On the same layer, Press CMD + J or CTRL + J to duplicate the circle vector

• Width: 83 px
• Height: 83 px
• X: 275 px
• Y: 271 px

Step 28

On the same layer,  and using the Rectangle Tool (U), add a rectangle to the shape to complete the cloud icon:

• Width: 152 px
• Height: 70 px
• X: 165 px
• Y: 284 px

Step 29

Double click on the cloud icon vector shape layer to show the Layer Styles panel. 

In Blending Options:

• Opacity: 100%
• Fill Opacity: 0%

Step 30

Click the checkmark next to Gradient Overlay and use the following settings:

• Blend Mode: Normal
• Opacity: 100%
• Gradient: #FFFFFF (0% Opacity) to #FFFFFF (100% Opacity)
• Style: Linear
• Angle: 90º
• Scale: 100%

Step 31

Click the checkmark next to Drop Shadow and use the following settings:

• Blend Mode: Soft Light
• Color: Black
• Opacity: 60%
• Distance: 0 px
• Spread: 0 px
• Size: 1 px

Result & Conclusion

Hopefully you enjoyed following along with this tutorial and have learned how to make a Glassmorphism styled cloud icon using simple shapes, layer styles, smart objects and filters in Photoshop.

Glassmorphism is new variation of the recent UI trend Neumorphism, which itself is a variation of Skeuomorphism. Glassmorphism combines the trends of depth and tactile feel found in other 'morphisms with a transparent glass-like aesthetic.