Frosted glass works well for privacy or for adding subtlety to a design, in real-life and digital designs. Creating a frosted glass effect is easy in Figma and can add a unique flair to your designs in a way that looks a lot more complex than it is. Let’s show you how.

How to Create a Frosted Glass Effect

For the full effect of frosted glass, you should already have some sort of background image within your design. The effect works best on top of photographic or visually complex images, rather than just plain color blocks or plain backgrounds.

We’re using the frosted glass effect as a bullet point indicator on a presentation design, to add a sleek, minimalist effect to the presentation. This gives some extra flair to your designs rather than just using a simple line or plain bullet point as an indicator.

You can create a master template for presentations in Figma and use this frosted glass effect in it. If you want to create a sleek bullet point indicator, just follow along.

1. Draw a Line

Design in Figma with a selection on a short horizontal line.

Draw your line by using the Line Tool (L). To keep the line horizontal, hold down Shift while drawing it. Choose a color for the line by clicking the colored square under Stroke while the line is selected.

The color should be dark enough to contrast your background, but it also needs to look good with the colors of your presentation. You can use Adobe Illustrator to create a color palette to find colors that work together.

Figma screen zoomed in to a horizontal green line with rounded ends.

Change the width of the line in the Stroke settings; click the icon with three horizontal lines and increase the number until your desired thickness. To get rounded ends, click the drop-down with a horizontal line in the Stroke menu, and scroll to the bottom of the drop-down menu for the option for rounded ends.

2. Draw a Circle

Draw a small circle using the Ellipse Tool (O). Hold down Shift while drawing the circle to make it perfectly spherical. Your circle should be small enough to be used as a bullet point, but large enough that the frosted glass will be evident.

Figma screen with zoomed in design showing a green circle next to horizontal green line.

To add color, select the circle and use Fill on the right-hand toolbar. You can use a neutral color—like gray or beige—or a lighter color from your design’s color palette.

Figma screen with zoomed in design showed a green circle with 60% opacity.

Then, change the opacity next to Fill to anywhere between 40% and 70%. You want to be able to see the design behind the circle while still seeing the color you’ve filled the circle with.

3. Add a Background Blur

Figma screen showing zoomed in design with blurred 60% opacity green circle.

This is the part that gives the frosted effect to your shape. Select the circle and go to Effects. The default effect is Drop Shadow, hover over it and click the arrow that appears. Choose Background Blur.

To increase or decrease the blur, click the icon next to Background Blur, and change the number to your desired blur effect.

To complete your bullet point indicator, move the line so it lines up with the edge of your circle. Select both the line and circle, right-click, and select Group Selection. Now you can move or duplicate this for use on various parts of your design.

Figma design with frosted glass effect panel over a phone mockup.

The blur works over any part of the design in the same way, as shown in another example we did above. Why not include this technique in a creative design challenge? The effect will become a great design asset.

Add Sleek Minimalism to Your Designs With a Frosted Glass Effect

The frosted glass effect in Figma is a simple way to add some sleek style to otherwise plain design aspects. You can use the frosted glass effect in many ways, such as full-color panels, search bars, or privacy windows over designs. Try adding a border, making a gradient, or placing the frosted layer in between other layers for some textural difference.