Harsha Vardhan N
The glass card effect makes your design more modern and visually appealing. If you’re trying to do it on Figma, this guide featuring simple steps backed up with a demonstration will get you covered.
Make Glass Effect in Figma
- Open Figma on your browser and sign in with your credentials. To get started with a new design, click on the New design file. If you’re already working on a design file, access it from Recently viewed.
- After the new or existing design is loaded, start by adding a shape to give it a glass effect. For demonstration, we have selected a Rectangle.
- With the shape added, it is selected by default. If it isn’t, click on it. Once selected, navigate to the Fill selection and click on Gradient.
- Ensure the gradient type is set to Linear, change the color to #EFEFEF for both gradient points, and adjust the opacity.
- After the gradient is set, add the Effect, select the Background Blur, and set the blur value to 50 – 60.
- To get a more accurate glass effect, add a Stroke and adjust the values like set in the image below.
- The glass card is ready, but before using it in the designs, present it better by rounding the corners to 16, 24, or 32.
If you do it right, you will have a glass effect added successfully to the shape.
Wrapping Up
Congratulations on learning how to make a glass effect in Figma!
Gradients on Figma can recreate the glass effect. To ease this process, you can add a glass image and adjust its opacity, but keep in mind that this doesn’t work well with all design scenarios.
