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: https://youtu.be/NYgdN2c6tpU
How to animate gradients in Adobe XD: https://youtu.be/t1iysvG2rJA
7 tips for designing a website: https://youtu.be/HECMyCQLRz0

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

Try Skillshare free for 1 month: https://www.skillshare.com/r/user/monicagalvan?gr_tch_ref=on&gr_trp=on

---
WORK WITH ME

Want me to review your portfolio and offer feedback? https://monicagalvan.co/shop/portfolio-review

Have questions you want to want to ask me about design? Book a call with me: https://monicagalvan.co/shop/consulting

---
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 – https://www.instagram.com/themonicagalvan/
Pinterest – https://www.pinterest.com/themonicagalvan/
Website – https://monicagalvan.co/

Видео How to create a glass effect in Adobe XD | Glassmorphism tutorial канала Monica's Design Process