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!
/ @letsui
Instagram!
/ unbox_design_
Behance!
https://www.behance.net/Jonathan_dickson
Twitter!
/ jonyive10
Please LIKE, SHARE & SUBSCRIBE
#neumorphism #glassmorphism #uidesign #designtrends
