Glassmorphism - How to create blurred background effect in Figma and HTML/CSS
To be able to offer high quality ad-free content for the readers, some Explained articles contain affiliate links, which may receive a small commission at no additional cost to readers.
In this tutorial I'll share how I built glassmorphism Figma Template and HTML/SCSS Codepen template to create blurred background effect.
If you are working in the field of UI Design, you have probably seen blurred effects in trending UI designs lately. With these simple steps you can create same look and feel with Figma and/or HTML and CSS.
Explained is a magazine offering free resources for small business owners, developers and designers to level up their career. To be able to continue offering ad-free content for the readers, Explained articles can contain affiliate links, which may earn commission without no additional cost at the readers.
Creating glassmorphism effect in Figma
1. Sign up for Figma
If you don't have Figma account yet, you can create free Figma account here.
2. Select background
Use any you like, I used a free flower photo from Pixabay
3. Draw a rectangle by selecting rectangle tool from top left menu
4. Set rectangle color and fill opacity (%) to your liking using left panel "Fill" option
5. Add background blur by expanding "Effects" on left panel and clicking the dropdown on "drop shadow"
Click effect icon to open setting and set blur to your liking
You can adjust the look and feel of the blur by setting different blur levels and rectangle fill colors and opacities. With the same method you can also create blurred tile UI effect where instead of blurring the whole UI, you will blur only the part that is behind the tile. Works especially on scrollable screens making the UX more interesting for the user.
Here is the finished Figma glassmorphism project for you to speed up the process. To keep the template clean for other users, duplicate the project first (instructions in Figma File).
Creating glassmorphism effect in HTML and CSS
Below is a codepen that shows how to achieve glassmorphism effect on HTML and SCSS. If you use CSS, feel free to replace the SCSS variables directly with the $ values.
The main part of the blur effect is backdrop-filter: blur(5px);
Note that this effect works on Chrome and Safari but to see it on Firefox users should explicitly enable it which might be wishful thinking. To see all supported browsers, see https://caniuse.com/css-backdrop-filter. On Firefox by default, the effect does not break the UI but the blur is just not visible for the users.
Copy and remix the code directly in Codepen.
