Figma Glass Effect: How to Create the Glassmorphism Look in 2026

Originally shared as a carousel on @dailywebdesign, original carousel by @avatarist.ai. Expanded with step-by-step instructions, values, and common mistakes.

Glassmorphism had its moment in 2021, got overused, and then matured into something more considered. In 2026, the glass effect is back, but designers who do it well are using it as an accent rather than a system. A frosted glass card against a gradient background. A floating nav on a rich photo. A modal with translucent panels.

When it's right, it looks genuinely beautiful. When it's wrong, it looks like 2021 again. Here's how to get it right in Figma.

What creates the glass effect

The glass effect is built from four ingredients working together:

1. Background blur, blurs whatever is behind the element, creating the frosted look
2. Semi-transparent fill, white or light color at low opacity (10–25%)
3. Subtle border, white or light stroke at low opacity (20–40%) on top and left edges
4. Context, a rich, colorful background behind the element (gradients, images, or vivid color)

All four have to work together. A glass effect on a white background doesn't look like glass, it looks like a faded box. The blur needs something colorful behind it to create the translucent impression.

Step-by-step: glass card in Figma

Step 1: Set up your background

Create a frame with a vivid gradient background. Try: deep purple (#6C1FFF) to electric blue (#0EA5E9), or dark navy (#0F172A) to teal (#0D9488). The more color variation, the more visible the glass effect will be.

Step 2: Create your card frame

Draw a rectangle on top of the background. Typical card dimensions: 320×200px, corner radius 16px.

Step 3: Add the semi-transparent fill

In Fill settings:

• Color: #FFFFFF
• Opacity: 12–18% (this is the key range, too low looks invisible, too high looks opaque)
• Try 15% as your starting point

Step 4: Add background blur

In the Design panel, find Layer section at the bottom:

• Enable Background blur
• Value: 12–20px (12px for subtle, 20px for strong frosted effect)
• 16px is the sweet spot for most cards

Step 5: Add the glass border

Click the + next to Stroke:

• Color: #FFFFFF
• Opacity: 25–35%
• Weight: 1px
• Align: Inside

Step 6: Add a subtle inner shadow

Add an Inner Shadow:

• Color: #FFFFFF at 8–12% opacity
• X: 1, Y: 1, Blur: 0

The finished values (copy these)

Fill: #FFFFFF, 15% opacity
Background Blur: 16px
Stroke: #FFFFFF, 30% opacity, 1px, Inside
Inner Shadow: #FFFFFF, 10% opacity, X:1 Y:1 Blur:0
Corner Radius: 16px

Common mistakes

Using glass on a flat color background. The blur needs something interesting behind it. Always use a gradient or image.

Too much opacity on the fill. Over 30% stops looking like glass. Keep it under 20%.

No border. The hairline border is what creates the impression of a glass edge. Without it, the card just looks blurry.

Using it everywhere. Glass as a system feels dated. Glass as a single accent element feels considered.

Show your glass UI in a real mockup

Glass effects look dramatically better in context than on a white Figma canvas. Upload your design to NewForm Studio and generate a device mockup, seeing your glass card inside a phone or laptop frame makes an immediate difference to how the effect reads.

View the full carousel on Instagram →

---

Credit: Original carousel by @avatarist.ai, follow them for more Figma tutorials and AI design content.