Glassmorphism – Adobe XD Tutorial 2021 New Trends



Check out the new UI design trend called Glassmorphism. In today’s video I will teach you how to achieve your own Glassmorphism design.

STEPS

1. Draw a rectangular shape and add some corner radius.
Radius: 51px

2. Apply gradient fill, use translucent colors to help achieve the glass effect when blurred.
Color 1: FFFFFF (Opacity = 40%)
Color 2: FFFFFF (Opacity = 10%)

3. Add background blur effect. The blur helps create the glass effect. Set the value to around 20, or choose any number.

4. Add Border to make it look more realistic, I chose a border width of 4px
HEX: FFFFFF and Opacity of 20%

5. Apply Shadow effect, shadows adds a nice visual hierarchy to the glass surface.
Shadow Color: 000000
Opacity = 10%
X: 0 Y:1 Blur:24

6. Fill with content, Use translucent text with overlay blending mode
Text Color: FFFFFF

FOLLOW ME ON

Subscribe!
https://www.youtube.com/channel/UCBB65xy2H3Tz3YxiiqQKIng?sub_confirmation=1

Instagram!
https://instagram.com/unbox_design_

Behance!
https://www.behance.net/Jonathan_dickson

Twitter!
https://twitter.com/jonyive10

Please LIKE, SHARE & SUBSCRIBE
#neumorphism #glassmorphism​ #uidesign​ #designtrends

Duration: 00:03:42

source