Your Designer Profile picture
Jun 23 8 tweets 3 min read
How to create Glassmorphism effect in @figma

Documented by @Shri.ui

#uidesign #uiuxdesign #figma
Create a rectangle with the right proportions and add corner radius of 30-40px
Add linear fill to the shape, check photo for details…
Add two sphere or circles to the background with a linear fill
Now add background blur effect to the rectangle (blur 30-45)
Add strokes with linear fill to create a border for better visual hierarchy
Add drop shadow effect to the rectangle and…
Add details and there you go, keep creating magic. Want to see this in a video tutorial, leave a comment 🤍

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Your Designer

Your Designer Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Daviowhite

Jun 25
How to design Tab or Nav Bar

Documented by @pela_team

#uidesign #uiuxdesign #figma Image
We want to design a super easy and minimal tab or nav bar Image
Step 1: at the bottom of your frame, draw a rectangle with a distance of 24 to 32px from around. Image
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(