Figma Glass Effect Tutorial: Create a Glassmorphism Calendar Icon Step by Step

Tutorial by @creative_vaani on Instagram. Originally posted here.

Figma's new glass effect changes how we build glassmorphism. Instead of stacking multiple blur layers and manually tuning opacity, you can now apply a native glass effect that handles the heavy lifting. In this tutorial, we walk through building a glass calendar icon from scratch, step by step.

Glassmorphism has been a dominant UI trend for years, but achieving the look used to require a convoluted stack of background blurs, gradient overlays, and shadow tricks. Figma's native glass effect simplifies this into a single effect you can apply and tune. Let's break down how to use it.

Step 1: Create Two Frames

Press F to activate the Frame Tool. Draw two frames and arrange them so they start to look like a calendar icon. One frame becomes the base (the calendar body), and the other sits on top as the glass element where the date will show through.

The key here is thinking about layering before effects. Your base frame holds the gradient, and the top frame holds the glass. Getting the proportions right at this stage saves you from fighting with alignment later.

Step 2: Add a Gradient Fill

Select the first frame and apply a gradient fill. Adjust the colors and angle to match the look you want. For a calendar icon, a soft purple-to-blue gradient works well as the base layer that the glass effect will sit on top of.

The gradient matters more than people think. The glass effect is translucent, so whatever is underneath it shows through. A well-tuned gradient creates the depth that makes the glass feel real rather than like a flat translucent rectangle.

Step 3: Add an Inner Shadow for Depth

Select the frame and add an inner shadow. Adjust the settings to create depth and make the base frame look more three-dimensional. A subtle inner shadow with low opacity (around 6 percent) and a small blur radius is usually enough. You want depth without making it look dirty.

Inner shadows are the secret ingredient in most realistic glassmorphism. They simulate the light catching the inner edge of the glass surface, which is what your eye expects to see when something looks "glassy."

Step 4: Apply the Glass Effect

Now for the main event. Select the second frame (the one that will become the glass layer) and apply Figma's glass effect. Adjust the blur and opacity settings to match the look you are going for.

The glass effect in Figma gives you control over the blur amount and the opacity of the glass layer. The goal is a frosted, semi-transparent look where you can see the gradient underneath but it is softened. Start with a moderate blur and tune from there. Too much blur and it looks like fog. Too little and it looks like a plain translucent rectangle.

Step 5: Add an Inner Shadow to the Glass Frame

Select the glass frame and add another inner shadow. This one enhances the depth of the glass layer itself, making it look more realistic with subtle softness and a balanced sense of depth.

This second inner shadow is what separates amateur glassmorphism from professional work. The first inner shadow gave depth to the base. This one gives depth to the glass itself, simulating the way light refracts through a real glass surface.

Step 6: Add Details and Finish

Put numbers or details inside the frames. Adjust alignment and spacing, and your glassy calendar icon is ready. The details (like the date number) should sit inside the glass frame, benefiting from the frosted effect behind them.

Take time with the final alignment. Glass effects amplify any spacing inconsistencies because the translucent layer makes edges harder to judge. Use Figma's smart guides and snap to pixel grid to keep everything crisp.

Why Figma's Native Glass Effect Matters

Before this feature, creating glassmorphism in Figma required a workaround: you would place a blurred copy of the background behind a semi-transparent shape, then layer shadows on top. It worked, but it was fragile. Move anything and the illusion broke.

The native glass effect is self-contained. The blur, the transparency, and the light behavior all live on the element itself. You can move it, resize it, and nest it without worrying about what is behind it. That makes glassmorphism practical for real production work, not just Dribbble shots.

Tips for Better Glass Effects

• Start with a strong gradient base. The glass effect only looks as good as what is underneath it.
• Use inner shadows generously. They are what create the illusion of physical glass.
• Keep blur moderate. Too much blur kills legibility of any text sitting on the glass.
• Test on different backgrounds. A glass effect that looks great on purple might look muddy on white.
• Use consistent radius. Rounded corners make glass feel more tactile and less like a sheet of plastic.

If you want to skip the manual work and generate polished UI mockups with AI in seconds, try Base44 to build and deploy design-forward apps without writing code.

---

Original carousel by @creative_vaani on Instagram. View the original post here.