How To Create Glassmorphism In Figma? 8 Simple Steps To Perfection

Have you fallen in love with the glassmorphism UI trend? Yet, the problem is – you’re not sure how to create glassmorphism in Figma? What is the easiest way to achieve the glass effect for your UI elements this style is known for?

You’ve watched several tutorials, each promising an easy process, only to find yourself more entangled in confusion. They either bombard you with advanced techniques or gloss over critical steps, leaving you stranded midway.

You might be wondering – can you even make glassmorphism in Figma?

My Los Angeles web design agency is heavily relying on Figma for our projects. And ever since we decided to experiment with glassmorphic designs, this tool has been our go-to choice due to its versatility.

I’m confident that anyone can use Figma to create glassmorphism user interfaces.

In this guide, I’ll show you two simple methods to make glassmorphism in Figma. You’ll learn how to create glassmorphism in Figma in just eight simple steps. I’ll also give you a shortcut to achieving the glass effect for your designs with a UI Toolkit.

By the end of this guide, you’ll be able to create your first glassmorphic designs in Figma and start implementing this trend in your projects with confidence.

But before you dive in, you might also want to check out my free mini course, 7 Days to Profitable Aesthetics. In seven easy-to-follow lessons delivered directly to your email inbox, you’ll learn sneaky tactics top web designers use to create high-converting digital assets, as well as profit-draining mistakes most businesses fail to spot on time.

Table of Contents:

• • Method 1: How To Create Glassmorphism In Figma From Scratch In 8 Steps
    • 1. Set Up A Background That Works Well With the Blur Effect
    • 2. Create A Shape For UI Element You Want To Apply Glassmorphism To
    • 3. Add A Linear Gradient To Achieve a Glass Look
    • 4. Add Background Blur – It’s Crucial To Choose The Right Range
    • 5. Add Drop Shadow To Achieve A Floating Effect
    • 6. Add Stroke With A Linear Gradient To Simulate Sharp Glass Edges
    • 7. Fill The Shape With Content
    • 8. Add Noise To Make Your Glassmorphic Elements More Realistic
  • Method 2: How To Make Glassmorphism In Figma With a UI Toolkit
  • Before You Start Creating Your Next Design…

Method 1: How To Create Glassmorphism In Figma From Scratch In 8 Steps

If you want to learn how to do glassmorphism in Figma from scratch, then this is the right method for you. Follow these eight simple steps, and you’ll end up creating a frosted glass effect for your user interface elements and capturing one of the biggest web design trends in 2024.

1. Set Up A Background That Works Well With the Blur Effect

Choosing a background is a crucial first step when creating glassmorphism in Figma. Many designers overlook the importance of setting up the background properly and end up being dissatisfied with end results.

I recommend choosing colorful backgrounds with gradients for glassmorphism designs. You can either:

• Download a background image and import it into Figma via Files -> Place Image.
• Use the uiGradients plugin in Figma to set up your background

Before setting up your background, you should understand the basics of gradient graphic design, as there are different types of gradients you can choose from. Usually, linear gradients are the safest choice for the glassmorphism style.

2. Create A Shape For UI Element You Want To Apply Glassmorphism To

After setting up your background, it’s time to add a shape that will serve as a foundation for your glassmorphism user interface element.

Head over to the toolbar and select the Frame tool. With a simple drag across the background, you can set the dimensions for your element.

Before moving on to the next step, there’s a subtle yet impactful tweak to apply: rounding the corners of your shape.

Adding a corner radius softens the edges and contributes to the overall aesthetic. I usually recommend a radius of 40-50 as a good starting point, striking a balance between too sharp and overly rounded corners.

3. Add A Linear Gradient To Achieve a Glass Look

The next step is to add a linear gradient to the frame you’ve created in the previous step (don’t confuse this with a background gradient).

To achieve a frosted glass effect, it’s best to use white color for a gradient on both sides. However, the trick lies in adjusting the opacity levels of these white hues.

Here are simple steps you can follow:

• Select your frame: Click on the frame you’ve created to ensure it’s the active element.
• Open the ‘Fill’ property: Find the ‘Fill’ option on the right-hand side in the properties panel.
• Choose ‘Linear Gradient’: From the dropdown menu within the ‘Fill’ option, select ‘Linear Gradient’.
• Set your colors to white: Adjust both ends of the gradient to white (#FFFFFF).
• Adjust transparency levels: For the first color stop, set the transparency to 40%. For the second, adjust it to 20%. Don’t take this as a strict rule – I encourage you to experiment with different transparency levels until you achieve the desired look.

4. Add Background Blur – It’s Crucial To Choose The Right Range

Adding a background blur is what creates the soft, hazy effect reminiscent of frosted glass, blurring whatever lies behind your UI element.

The key here is balance; too much blur and you lose clarity, too little and the effect is barely noticeable.

It’s crucial to experiment during this step. The sweet spot for your design will depend on the overall aesthetic and the elements that lie in the background.

Follow these steps:

• Navigate to Frame properties: With your frame selected, look to the right side of the editor for the ‘Effects’ section.
• Add an effect: Click the ‘+’ icon to introduce a new effect to your frame.
• Choose ‘Background Blur’: From the dropdown menu that appears, select ‘Background Blur’.
• Adjust the blur range: A common starting point is setting the blur to around 30-40. This value offers a noticeable blur effect without compromising the visibility of the design elements beneath. However, don’t hesitate to adjust the blur range beyond the suggested starting point to match your design’s unique requirements.

5. Add Drop Shadow To Achieve A Floating Effect

This step is crucial for creating the illusion of your UI element floating above the rest of the design, a hallmark of glassmorphism. It adds depth and dimension, transforming a flat shape into something that appears to hover just off the screen.

The trick, however, is moderation. Too heavy a shadow can overwhelm the subtlety of the glass effect, while too light a shadow might not provide enough distinction, especially in dark mode glassmorphism.

To apply a drop shadow that enhances the floating effect without overpowering your design, follow these steps:

• Access Effects for Frame: With your frame selected, go to the ‘Effects’ section within the Frame properties on the right side of the editor.
• Add a Drop Shadow: Click on the ‘+ add effects’ button. A default drop shadow will be applied to your frame.
• Customize the Shadow: To fine-tune the shadow to your liking, click on the settings icon that appears next to the newly added shadow. This opens the properties menu where you can adjust the shadow’s blur radius, spread, color, and opacity.

6. Add Stroke With A Linear Gradient To Simulate Sharp Glass Edges

To mimic the sharp, refined edges characteristic of glass when using Figma to create glassmorphism, adding a stroke to your frame is essential. The stroke should be light and adopt a neutral tone, ideally using a linear gradient to softly blend into the design without drawing unnecessary attention.

Here’s how to elegantly incorporate a stroke with a linear gradient into your design:

• Select Stroke Property: Go to the ‘Stroke’ section within the Frame properties. Click the ‘+’ button to add a new stroke. By default, Figma applies an external stroke, but for a more integrated look, opt for an internal stroke.
• Choose a Linear Gradient: Click on the color option for the stroke to bring up the color picker. Here, you’ll switch from a solid fill to a linear gradient. You can do this by selecting ‘Linear’ from the dropdown menu.
• Set Gradient Colors: For a subtle effect that doesn’t overpower your design, use white (#FFFFFF) for both ends of the gradient. This choice maintains the stroke’s subtlety and complements the glassmorphism style.

7. Fill The Shape With Content

Now that your UI element has taken on a glass-like appearance, it’s time to infuse it with purpose by adding content.

When adding text to your glassmorphic design, consider readability and accessibility. The clarity of text against the semi-transparent and blurred background is paramount. Opt for white or very light-colored text to maintain the ethereal feel of glassmorphism.

However, to ensure that your message stands out clearly against the busy or dynamic backgrounds that glassmorphism often entails, making your text bold is a wise choice. This enhances contrast, making your content accessible and easy to read at a glance.

8. Add Noise To Make Your Glassmorphic Elements More Realistic

The final flourish to bring your glassmorphic design closer to reality is the addition of noise. This subtle effect mimics the imperfections found in actual glass, adding depth and texture to your UI element. Rather than a flawlessly smooth surface, a touch of noise gives your design character and a tactile feel.

Integrating noise into your Figma design is straightforward, especially with the help of plugins designed for this purpose. Here’s how to do it:

1. Install a Noise Plugin: Install a Noise plugin from Figma’s plugin library. This tool is invaluable for effortlessly adding realistic textures to your designs.
2. Apply Noise to Your Frame: Right-click on the frame you wish to add noise to, navigate to the ‘Plugins’ menu, and select your installed noise plugin.
3. Adjust the Noise Settings: The plugin will present you with options to customize the noise effect. You’ll want to aim for a balance where the noise is perceptible yet doesn’t overpower the design. The goal is to achieve a texture that suggests a rough surface, mimicking the natural irregularity of glass.
4. Finalize the Effect: Once you’re satisfied with the settings, confirm your choices. The plugin will generate the noise effect on your frame, seamlessly integrating it into your design.

Method 2: How To Make Glassmorphism In Figma With a UI Toolkit

Although it’s simple to create glassmorphism in Figma from scratch (by following eight steps I’ve described above), there’s also a shortcut.

You can use a UI Toolkit to quickly create glassmorphic designs.

UI toolkits are a boon for designers looking to speed up their workflow. They provide pre-made components and styles that can be easily adapted to fit your project’s needs.

However, I only recommend using them once you’ve learned how to use Figma for web design.

Here’s how to use a UI toolkit to create glassmorphism in Figma:

• Access the Figma Community: Begin by opening the Figma community. You can do this by clicking on the ‘Home’ icon within Figma or by visiting the Figma community website directly.
• Search for Glassmorphism Toolkits: In the search bar, type “glassmorphism” to find available UI kits. You’ll be presented with a variety of toolkits tailored to glassmorphism, each offering a range of components and styles.
• Choose and Install a Toolkit: Select a UI kit that aligns with your design vision. Install the toolkit to have it added to your Figma workspace.
• Incorporate Toolkit Components: With the toolkit installed, open it in the Figma editor. Here, you can explore the various glassmorphic components available. You can copy these directly into your design files, making quick work of adding glassmorphic elements to your project.

While UI toolkits offer a head start, customization is often necessary to align the components with your specific design requirements.

• To customize a component, first, detach it from the original to make edits. Right-click on the component and select ‘Detach Instance‘.
• Next, select the detached component to access its properties. Here, you can adjust aspects like transparency, blur, and gradient to fit your design perfectly.

Before You Start Creating Your Next Design…

Creating glassmorphism in Figma is simpler than it might initially seem.

Incorporating this style into Alpha Efficiency’s projects has broadened our design portfolio, showcasing our ability to adapt and innovate. It has allowed us to present potential clients with a clear message: we’re not just followers of trends; we’re at the forefront, pushing the boundaries of creativity and design innovation.

I encourage you, whether you’re a seasoned designer or just wondering how to make a graphic design portfolio with no experience to experiment with glassmorphism Figma designs. Remember, glassmorphism is not just a trend; it’s an opportunity to expand your creative toolkit and impress clients with your ability to harness the latest in design innovation.

But did you know that most designers and developers fail to acquire the skills that are necessary for crafting highly profitable digital assets?

They get stuck in what I call ‘tutorial hell’ – months of learning Figma, CSS, HTML, JavaScript… These are all important skills, but they’re not enough to move the needle and exponentially boost your income as a website creator.

That’s why I’ve prepared an interactive roadmap, Profitable Websites From Scratch. It’s free from clutter most courses teach and hyper-focused on 4% of evergreen skills that can help you unlock an additional $10k in monthly revenue by creating and selling websites to your ideal type of clients (altogether avoiding energy vampires).

In 90 days or less, you’ll master:

• Core principles of high-impact aesthetics.
• Fundamentals of the UX.
• How to increase sales with proven copywriting frameworks.
• How to secure website traffic with essential SEO strategies.
• How to create an offer so you can land dream clients every month.

Ready to escape the tutorial hell and start your journey toward becoming an irreplaceable designer? Order your Profitable Websites From Scratch here.