Web Design » Figma » How Do You Do Glassmorphism in Figma?

How Do You Do Glassmorphism in Figma?

Last updated on September 28, 2022 @ 9:43 pm

If you’re looking to add a touch of Glassmorphism to your Figma designs, there are a few things you’ll need to do. First, you’ll need to find or create a vector shape that you want to use as your base. Once you have your base shape, you’ll need to duplicate it and resize one of the copies so that it’s slightly smaller than the original. Then, with both shapes selected, click on the “Add Inner Shadow” effect from the “Effects” menu.

This will create an inner shadow on both shapes, but we only want the inner shadow on the smaller shape. To fix this, click on the small shape and click on the “Invert” button in the “Inner Shadow” effect settings. This will invert the direction of the inner shadow, so that it’s only visible on the smaller shape. Finally, add a slight blur to the inner shadow by increasing the “Blur” setting in the “Inner Shadow” effect settings.

PRO TIP: This article is about how to do glassmorphism in Figma. Glassmorphism is a style of design that uses transparent and translucent elements to create a sense of depth and layering. It can be used to create beautiful, modern interfaces. However, it is important to use glassmorphism sparingly and only when it enhances the user experience. Too much glassmorphism can make an interface difficult to use and understand.

And that’s all there is to it! By following these simple steps, you can easily add a touch of Glassmorphism to your Figma designs.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.