‍

You may have seen many glassmorphism tutorials, but you've probably never thought of using background blur this way. In this superfast tutorial, I will show you a quick original result of playing with glass material.

‍

1. Draw a shape.

As usual, start with a simple shape that will be turned into a glass layer. To preview if you are going in the right direction, add a simple shape with vivid colors in the background.

‍

2. Create glass effect

Set the layer's fill to white, lower the value to around 30%, and add a background blur with a value of 200.

‍

‍

‍

‍

3. Add another layer.

Duplicate the glass layer and reduce its width. Align with one of the edges of the bigger layer (see picture below). Change the blending mode to "Overlay" to avoid dirty colors - especially when we add drop shadow in the next steps.

‍

‍

‍

4. Create the illusion of 3D

Change the fill of the smaller glass layer to the gradient. It will be black on one edge and white on the opposite. Play with opacity to make it look good.

‍

‍

Now, add also a drop shadow. Adjust it's direction, to cast shadow near to the darker edge of smaller glass layer - this creates depth.

‍

‍

‍

5. Duplicate and align.

To increase the visual effect, duplicate the glass layers and place them nearby. Look how nicely they blur the shape in the background. That's it!

‍

‍

‍

Watch how to make the effect

If you would like how I created this effect and follow the steps one by one, watching the process, feel free to watch the tutorial on YouTube:

‍

‍

To conclude

Sometimes, simple effects like drop shadows, background blur, and a little bit of blending mode adjustments lead to very interesting results. Did you enjoy this tutorial? Let me know, so I know if you would like to see more effects like this!

Thanks for reading.

‍

‍