How to create a glass effect in Adobe XD | Glassmorphism tutorial

In this Adobe XD tutorial for beginners, you'll learn how to create a glass effect in Adobe XD. This simple design effect is also called glass morphism in UI design. Once you understand the fundamentals of how to create it, there are an infinite amount of ways you can use it.

Start with creating a gradient rectangle for the background. Have the gradient span the shape diagonally, choose two bright colors for the endpoints. Draw the card shape on top, change the fill to white, and check the box for "background blur" in the appearance panel. This is the glass effect in its simplest form but from here you can truly customize by adjusting the blur amount, brightness, and opacity levels.

To add to the design, we'll draw two circles, add color to the fill, and send them behind the card rectangle shape. Adjust the blur amount on the glass card to see how it changes. Now add your UI design elements like typography for the main headline, a secondary headline, as well as a button with rounded corners. Copy the button shape and paste it in front. Select the second button behind the first, click the arrow next to Background Blur to switch to Object Blur. Adjust the blur amount to achieve the effect you want.

WATCH NEXT
How to design simple icons in Adobe XD:    • How to design simple icons | Adobe XD...  
How to animate gradients in Adobe XD:    • How to animate gradients in Adobe XD  
7 tips for designing a website:    • 8 tips for designing a website  

---
LINKS

Want 10% off Field Notes? Use code MONICA10 https://fieldnotesbrand.com

Present your designs and artwork in a professional way, check out the Modern Frame Mockup Bundle: https://monicagalvan.co/mockups

Need help wireframing? Check out the Wireframe Kit: https://monicagalvan.co/wireframes

Try Skillshare free for 1 month: https://www.skillshare.com/r/user/mon...

---
ABOUT ME

Hello! I'm Monica, a designer living in San Francisco, California. This channel is a place where I share all my design and creative side projects. By sharing my process, I hope to help you learn more about design!

---
SOCIAL

Instagram –   / themonicagalvan  
Pinterest –   / themonicagalvan  
Website – https://monicagalvan.co/