Figma Glass Effect Tutorial: Create Glassmorphism in Minutes

Originally created by @avatarist.ai and shared with the NewForm community.

Glassmorphism is one of the most popular visual trends in UI design right now, and Figma makes it surprisingly easy to achieve. This tutorial from @avatarist.ai walks through the complete process of creating a glass effect that looks polished and professional. Whether you are designing a dashboard, a mobile app, or a landing page hero section, mastering the glass effect gives you a versatile visual tool.

What Is Glassmorphism?

Glassmorphism is a design style that mimics frosted glass. It uses transparency, blur, and subtle borders to create the illusion that an element is made of glass floating over a colorful background. The effect became popular through Apple's design language and has since been adopted across web and mobile interfaces.

The key ingredients of a glass effect are:

• A colorful or gradient background that shows through the glass
• A blur layer that softens the background behind the glass element
• A semi-transparent fill on the glass element itself
• A subtle inner border or highlight along the edges to simulate light refraction
• Optional shadow to create depth and separation

Step 1: Set Up Your Background

Start with a vibrant background. This is crucial because the glass effect depends on having something interesting to blur. A gradient mesh, an abstract pattern, or a colorful image all work well. In Figma, you can create a gradient background by selecting a frame, clicking the Fill property, and choosing Linear or Radial gradient.

For the best results, use at least three color stops in your gradient. The more varied the colors behind your glass element, the more visible the blur effect will be. If your background is too plain, the glass effect will look flat and unconvincing.

Step 2: Create the Glass Layer

Draw a rectangle or rounded shape over your background. This will be your glass element. Set the fill to white with low opacity, typically between 10% and 20%. The exact value depends on how transparent you want the glass to appear.

Next, apply the blur. In Figma, there are two types of blur: Layer Blur and Background Blur. For glassmorphism, you want Background Blur so the content behind your glass element gets blurred. A value between 20px and 40px usually produces the frosted glass look. Too little blur and it looks like a simple overlay. Too much and you lose all detail from the background.

Step 3: Add the Border and Highlights

The border is what sells the glass effect. Without it, your element just looks like a blurry overlay. Add a stroke to your glass shape with these settings:

• Color: White
• Opacity: 30-50%
• Weight: 1-2px
• Position: Inside or Center

For an extra level of polish, you can add a gradient stroke that goes from a lighter white at the top to a slightly darker tone at the bottom. This simulates how light hits a real glass surface from above.

If Figma's stroke options are not enough, you can duplicate your glass shape, make it 1px smaller on each side, remove the fill, and apply a subtle white gradient stroke. This gives you more control over the highlight effect.

Step 4: Shadows and Depth

Shadows are optional but recommended. A soft drop shadow separates your glass element from the background and adds realism. Use a drop shadow with:

• Low opacity (around 15-25%)
• A blur radius of 20-40px
• A small y offset (4-8px)
• A subtle spread (2-5%)

The shadow should be barely visible. If it is too strong, the glass effect loses its airy quality.

Common Mistakes to Avoid

1. Too much opacity on the fill. Glass is transparent. If your fill is above 30%, it stops looking like glass and starts looking like a colored card.
2. Skipping the border. The highlight on the edge is what makes glass read as glass. Do not skip it.
3. Using Background Blur on the glass element itself. Background Blur blurs what is behind the element. Layer Blur blurs the element itself. Know the difference.
4. Flat backgrounds. If there is nothing colorful behind your glass, the blur has nothing to show.

Tips for Better Results

• Use Figma's Dev Mode to inspect your blur values and share them with developers.
• Create a glass effect component so you can reuse it across your design system.
• Test your glass effect on different background colors to make sure it works in all contexts.
• If you want to turn your glass effect designs into premium mockups, try the NewForm Studio for instant results.
• Ready to build an app with your glassmorphism design? Base44 can help you go from design to deployed application quickly.

---

Post by @avatarist.ai. See the original Instagram carousel for the full visual tutorial.