How to Nail Apple’s Liquid Glass Effect in Figma (Without Overcomplicating It)
Apple’s design language is clean, futuristic, and… honestly, kinda hypnotic. One of the slickest elements we’ve seen lately is the liquid glass effect—that semi-transparent, layered, glossy UI that makes buttons and cards look like floating droplets. Good news? You can totally recreate that in Figma, and it's easier than it looks.
In this tutorial-inspired article, we’re walking you through the exact steps to get that Apple-style glassmorphism going in your Figma designs. Whether you're a UI newbie or a design veteran, this is a perfect visual trick to add to your toolkit.
🔍 What Is the Liquid Glass Effect?
Think of it as glassmorphism turned pro: slightly blurred, barely-there opacity with a hint of texture and some inner shadows for depth. It’s elegant, functional, and surprisingly flexible.
🛠️ Step-by-Step Guide to Building the Liquid Glass Effect in Figma
1. Start with Auto Layout
Drop in your text—like “Sign Up” or “Learn More”—then wrap it in Auto Layout. This makes resizing easier and keeps padding consistent.
💡 Pro Tip: Use padding values like 16px horizontally and 10px vertically to keep things looking tight.
2. Add a Background Rectangle
Create a rectangle behind your text and set its fill color to white with an opacity around 1–2%. This soft base is key to making your background blur stand out without being overbearing.
3. Apply a Background Blur
Select the rectangle and head to the Effects panel. Add a Background Blur — around 6–10 is the sweet spot. This gives you that dreamy, frosted-glass effect.
4. Liquid Effect Texture
Select the rectangle again and head to the Effects panel. Add a Texture — Size around 90 and Radius arond 40. This will give you similar effect to Apple's iOS 26 liquid glass.
5. Create Depth with Inner Shadows
Add two inner shadows to simulate light sources:
First shadow: Offset bottom-right (2px, 2px), darker color, low opacity.
Second shadow: Offset top-left (-2px, -2px), lighter color, lower opacity.
These give it a subtle “puffy” appearance like real glass catching the light.
6. Blend It Right
Change the layer’s blend mode to Plus Lighter or Screen, then lower the opacity to around 10–20%. Now it reacts to whatever’s underneath, just like a real translucent material would.
🎯 Where to Use This Effect
Call-to-action buttons (especially on light or blurred backgrounds)
Notification cards
Login modals or overlays
Any UI element that needs to “float” above a complex background
Final Thoughts
Creating Apple’s liquid glass effect in Figma isn’t rocket science — it’s just a few smart layers, blur settings, and some shadow tweaks. But the end result? Super polished. Whether you're working on a mobile app, web dashboard, or a quick prototype, this effect can instantly level up your design’s perceived quality.
Ready to give your UI that premium Apple feel?
👉 Watch the full tutorial here: https://youtu.be/3aq1IwouLG0
