Designilo

The glass effect—also known as glassmorphism—has become a trendy way to add depth, style, and a modern feel to UI designs. Inspired by frosted glass, this look uses blurred backgrounds with semi-transparent fills, giving interfaces a clean, layered appearance.

In this guide, you’ll learn:

• What a glass effect is and when to use it
• How to create the glass effect step by step
• Pro tips to make it look realistic
• Bonus: How to save it as a reusable style

🧊 What Is the Glass Effect in Figma?

The glass effect mimics the look of frosted glass over a blurred background. Key elements include:

• A background blur applied to the object
• A semi-transparent fill (usually white or light gray)
• Optional inner shadow or border to enhance realism

This effect is widely used in:

• Dashboard cards
• Modal overlays
• Login screens
• Hero sections with background images

✅ How to Create a Glass Effect in Figma

Step 1: Add a Background

You need something to blur. Use:

• A photo
• A colorful gradient
• An abstract pattern

Place this background layer behind everything else.

Step 2: Create the Glass Layer

1. Draw a rectangle (or frame) on top of the background
2. Set the fill to white with 5–25% opacity (e.g., #FFFFFF at 15%)
3. Under Effects, click “+” and select Background Blur
4. Adjust blur value (16–40 is typical)

Now the background behind the rectangle becomes blurred—like it’s being viewed through frosted glass.

Step 3: Add Finishing Touches

To make the glass more realistic, consider:

• Border: Add a 1px border with low-opacity white (e.g., #FFFFFF at 10–15%)
• Inner Shadow: Subtle inner shadows can add dimension
• Rounded corners: Use 8–16px for a soft look
• Multiple Layers: Stack semi-transparent cards for depth

🧰 Bonus: Save the Glass Effect as a Style

If you’ll reuse this effect:

1. Select the object
2. In the Effects panel, click the four-dot icon (Styles)
3. Create a new style for the blur
4. Do the same for fill and stroke if you want consistent reuse

Now you can apply the same glassmorphic style to other cards, modals, and elements across your file.

🎨 Pro Tips for Better Glassmorphism

• Use high-contrast backgrounds behind the glass for maximum visual impact
• Avoid overusing—glass effects are best for hero UI, not everything
• Combine with neumorphism or minimal flat UI for best results
• Adjust blur strength depending on card size (larger = softer blur)

🚫 Common Mistakes to Avoid

• ❌ Using Layer Blur instead of Background Blur (they’re different!)
• ❌ Applying the effect without any background to blur—it won’t show up
• ❌ Using 100% opacity for the fill—it kills the glass effect
• ❌ Over-blurring—too much blur makes it look messy

🧭 In Summary: Adding Glass Effect in Figma

Step	What to Do
1	Add colorful/photo background
2	Create a semi-transparent white rectangle
3	Apply Background Blur
4	Add optional border and shadows
5	Save styles for reuse

The glass effect in Figma is simple, elegant, and highly effective when used well. Whether you’re creating landing pages, cards, or overlays, it adds a touch of sophistication and modernity to your UI design.

Want more hands-on design tips and component tricks? Visit Designilo.com for more Figma tutorials and workflow guides.