• Home
  • Design
  • Advertising
  • Inspiration
  • Tools
  • Buzz
  • Follow Us ▾
    • Facebook
    • Facebook Group
    • LinkedIn
    • LinkedIn Group
    • Threads
    • Instagram
    • Pinterest
    • Twitter / X

Digital Synopsis

Design, Advertising & Creative Inspiration

  • Photoshop
  • Logo Design
  • UI/UX
  • AI
  • Web Design
  • Typography
  • Photography
  • About Us
  • Advertise

How To Create A Stunning Glass Effect For Your UI Designs

Polish graphic designer Przemyslaw Baraniak, also known as Thalion, has come up with a handy set of tutorials on how to create a glass card effect for your UI and web designs. Glassmorphism is one of the hottest trends in UI/UX right now, and it makes your designs look modern and stylish.

Thalion shows you how to use gradient, blur, shadow, and noise to create the glass effect. There are two video tutorials available – one for Sketch and the other for Figma. The Sketch tutorial is also available as an image series. Check them all out below.

How To Create A Stunning Glass Effect For Your UI Designs

 

1.

How to create a stunning glass effect for your UI designs - Draw the shape

 

2.

How to create a stunning glass effect for your UI designs - Apply gradient fill

 

3.

How to create a stunning glass effect for your UI designs - Add background blur

 

4.

How to create a stunning glass effect for your UI designs - Add border

 

5.

How to create a stunning glass effect for your UI designs - Apply shadow

 

6.

How to create a stunning glass effect for your UI designs - Fill with content

 

7.

How to create a stunning glass effect for your UI designs - Add frost

 

Watch the Sketch Tutorial

 

Figma tutorial

Share this post with a designer friend and voice your views in the comments below.

Don't Miss:

  • how-to-create-a-logotype
    Designer Who Created The Instagram Logo Shows You How To Design A Logotype
  • beautiful-gradient-logo-designs
    31 Beautiful Gradient Logos For Design Inspiration
  • how-to-blend-and-composite-images-in-photoshop
    How To Blend Images Seamlessly And Create A Perfect Composite In Photoshop
  • sketch-vs-photoshop
    Sketch vs. Photoshop
  • visual-hierarchy-tips
    6 Visual Hierarchy Tips That Will Make You A Better Designer
  • how-to-create-seamless-backdrops-with-photoshop
    How To Create Flawless And Seamless Backdrops With Photoshop

Share Your Views:

Comments for this post are now closed.
Share your thoughts with 433,000+ design lovers on our Facebook Page.

Popular

  • Graphic Designer Fixes The 9 Worst Logos Ever
  • 50 Incredibly Creative Logos With Hidden Meanings
  • 11 Best And Worst Redesigns Of Famous Logos
  • Top 10 Netflix Documentaries For Graphic Designers
  • 11 Differences Between Designers And Clients

TRENDING

  • Top 20 Graphic Design Trends For 2026
  • Top 10 Logo Design Trends For 2026 And How To Use Them
  • Portfolios Of Designers Who Have Worked At Apple, Google, Meta, And More
  • Designers Are Sharing Their Redesigns Of Famous Logos And Some Of Them Are Better Than The Original
  • “Which Current Graphic Design Trend Will Age Badly?” – Here Are The Top Replies

Follow Us On

  • Facebook
  • Facebook Group
  • LinkedIn
  • LinkedIn Group
  • Threads
  • Instagram
  • Pinterest
  • X / Twitter

Copyright © 2012-2026 Digital Synopsis | Privacy Policy | Affiliate Disclosure | Advertise With Us