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

Glassmorphism is one of those effects that looks effortless when it is done right and muddy when it is not. The difference comes down to five or six specific settings in Figma that most people get half right on instinct and then fudge the rest. This walkthrough breaks down each step using the exact settings that produce a clean frosted glass card, based on the carousel by @creative_vaani.

Post by @creative_vaani.

The finished glassmorphism card. Image: @creative_vaani via Instagram.

What glassmorphism actually is

Glassmorphism is a UI style that mimics frosted glass. A semi-transparent background, a background blur, a subtle border, and layered shadows combine to make a surface look like it is floating behind a sheet of frosted glass. Apple popularized it with macOS and iOS, and it has been a staple of modern web and app design ever since.

The effect works because it creates depth without heavy decoration. Your background shows through just enough to establish context, while the blur keeps the foreground content readable. The trick is getting the balance right: too much blur and it looks like a gradient, too little and it looks like a flat rectangle with low opacity.

Step 1: Set up your frame and background

Start with a frame that has a colorful or textured background behind it. Glassmorphism needs something to blur. If your background is a solid color, the effect will not read as glass at all, it will just look like a translucent box.

Step 1: Create your frame over a vibrant background. Image: @creative_vaani.

Create a rectangle or frame for your glass card. Make it roughly 320 by 400 pixels, or whatever size fits your layout. Rounded corners are part of the look: set the corner radius to 16 or 24 pixels.

Step 2: Add the fill at low opacity

This is where most people go wrong. The fill should be white (or a very light tint) but at a low opacity, typically between 8% and 15%. If you set it higher, the card becomes opaque and loses the glass quality. If you set it lower, the content on top becomes hard to read.

Step 2: White fill at roughly 10% opacity. Image: @creative_vaani.

In Figma, select your card, go to the Fill section in the right panel, click the fill color, and drag the opacity slider to around 10%. You should still see your background through the card, just slightly muted.

Step 3: Apply the background blur

This is the setting that makes it glass. In Figma, scroll down in the right panel to the Effects section. Click the plus icon and choose Layer Blur or Background Blur. Background Blur is the correct one for glassmorphism because it blurs whatever is behind the layer, not the layer's own content.

Step 3: Background blur set to around 20-40 pixels. Image: @creative_vaani.

Set the blur radius to somewhere between 20 and 40 pixels. The exact number depends on how busy your background is. A complex photo background needs more blur, a simple gradient needs less. Start at 30 and adjust by eye.

Step 4: Add a subtle inner border

A glass card needs a hairline border to sell the effect. Without it, the edge blends into the background and the card looks like a smudge rather than a solid surface.

Step 4: Inner stroke at 1px, white, 30-50% opacity. Image: @creative_vaani.

Add a stroke in the Stroke section: 1 pixel wide, white, at 30% to 50% opacity. Place it as an inner stroke (center works fine too, but inner looks slightly cleaner on rounded corners). This thin bright edge is what makes the card read as a piece of glass catching light.

Step 5: Layer your shadows

Glassmorphism lives or dies on its shadows. You need two: a soft drop shadow to lift the card off the background, and an inner shadow to add depth to the glass surface.

Step 5: Drop shadow plus inner shadow for realistic depth. Image: @creative_vaani.

For the drop shadow: set it to a dark color at 10-20% opacity, with a blur of 20-40 pixels and a Y offset of 4-8 pixels. For the inner shadow: use white at 20-30% opacity, blur of 2-4 pixels, and a Y offset of 1-2 pixels. The inner shadow simulates light hitting the top edge of the glass.

Step 6: Add your content and finalize

Now place your text, icons, or buttons on top of the glass card. Keep text at a readable weight: medium or semibold works best on glassmorphism surfaces because the blurred background can interfere with thin fonts.

Step 6: The completed glass card with UI content. Image: @creative_vaani.

One final check: toggle the blur on and off to see the difference. The card should look like frosted glass with it on, and like a flat translucent rectangle with it off. If both look similar, your blur is too low. If the card looks like a gradient blob, your blur is too high.

Quick settings reference

Here is every value from the steps above in one place so you can copy them directly into Figma:

| Setting | Value | | - | - | | Fill | White, 8-15% opacity | | Corner radius | 16-24px | | Background blur | 20-40px | | Stroke | 1px, white, 30-50% opacity, inner | | Drop shadow | Dark, 10-20% opacity, 20-40px blur, 4-8px Y offset | | Inner shadow | White, 20-30% opacity, 2-4px blur, 1-2px Y offset |

When to use glassmorphism (and when not to)

Glassmorphism works best for cards, modals, and navigation overlays that sit on top of a rich background. It is a poor choice for full-page backgrounds, dense data tables, or anything that needs to meet WCAG AAA contrast requirements without careful tuning. If your background is busy and text-heavy, the blur can create readability issues that no amount of opacity tweaking will fully solve.

For the cleanest results, pair glassmorphism with a vibrant gradient or photo background, keep content minimal, and test on both light and dark modes. The same settings that look great on a dark background can look washed out on a light one.

---

Original carousel by @creative_vaani on Instagram.

Want to turn this design technique into a real working app? Try Base44 and import your Figma frame directly.