How to Create a Glass Effect in Figma: A Step-by-Step Tutorial for 2026

Post by @webvizionagency on Instagram.

Glassmorphism is everywhere in 2026 UI design. Apple's Liquid Glass set the tone, and now every design tool from Figma to Webflow has its own take. But making a glass effect that actually looks good in Figma requires more than slapping a blur on a rectangle. Here is a step-by-step tutorial based on the carousel above.

Slide 1: Introduction to the glass effect tutorial. Via @webvizionagency.

Step 1: Set Up Your Background

Glass only works when there is something behind it. Start with a vibrant, textured background. A gradient mesh or a photo with strong colors works best because the blur effect needs visual content to distort. If your background is flat white, the glass effect will be invisible.

Create a frame in Figma (390x844 for mobile) and fill it with a colorful gradient or image. This is your canvas. Every glass layer you add will sit on top of this and blur whatever is beneath it.

Slide 2: Background setup with gradient mesh. Via @webvizionagency.

Step 2: Draw Your Glass Shape

Create a rectangle or rounded rectangle on top of the background. Set:

• Corner radius: 16px (or higher for a softer look)
• Fill: White at 10-15% opacity (this is the frosted layer)
• Stroke: 1px white at 30% opacity (this creates the glass edge)

The fill and stroke combination is what separates glass from a simple blur. Without the stroke, the glass edge disappears. Without the translucent fill, it just looks like a blur, not a material.

Slide 3: Shape settings for the glass card. Via @webvizionagency.

Step 3: Apply the Background Blur

This is the core of the effect. Select your glass shape and add a Background Blur of 20-30px. The blur distorts the content behind the shape, creating the frosted glass look.

The exact number depends on your background. Busy backgrounds need more blur (30px+). Simpler gradients can get away with 15-20px. Test it with real content behind it, not just the gradient, because text and images change how the blur reads.

Slide 4: Background blur settings. Via @webvizionagency.

Step 4: Add Inner Shadows for Depth

Flat glass looks like a screensaver. Real glass has depth. Add two inner shadows:

• Inner shadow 1: 1px offset, 0px blur, white at 20% opacity (top edge highlight)
• Inner shadow 2: 0px offset, 4px blur, black at 5% opacity (subtle depth)

The top highlight simulates light catching the glass edge. The depth shadow adds just enough darkness to make the glass feel like it sits above the background, not flat on it.

Slide 5: Inner shadow configuration. Via @webvizionagency.

Step 5: Add a Drop Shadow for Elevation

Finally, add a drop shadow to lift the glass off the background:

• Offset: 0px Y, 8px blur
• Color: Black at 10-15% opacity
• Spread: 0

This creates the sense that the glass card is floating above the content. Without it, the glass blends into the background. With it, the card becomes a distinct surface.

Slide 6: Final result with all effects applied. Via @webvizionagency.

The Full Settings Checklist

Here is every setting you need for a production-ready glass effect in Figma:

1. Fill: White at 10-15% opacity
2. Stroke: 1px white at 30% opacity
3. Corner radius: 16px (adjust for your design)
4. Background blur: 20-30px
5. Inner shadow (highlight): 1px Y offset, 0px blur, white at 20%
6. Inner shadow (depth): 0px offset, 4px blur, black at 5%
7. Drop shadow: 0px X, 8px Y, 10-15% black

Save this as a Figma component style so you can reuse it across your designs.

Common Mistakes

The biggest mistake is using too much blur. At 50px+, the glass stops looking like glass and starts looking like fog. Another mistake is skipping the inner shadows. Without them, you get a flat blur rectangle, not a dimensional glass surface. Finally, test your glass effect on different backgrounds. A glass card that looks great over a gradient might disappear over a photo.

Take It Further

If you want to build interfaces with glassmorphism without manually configuring every layer style, Base44 includes modern design system primitives that handle blur, shadows, and material effects out of the box.

---

Original carousel by @webvizionagency. View the original Instagram post.