Thread by @FonsMans

Tutorial Thread ✨

Learn how to create a glowing glass effect with @figma, in just a few easy steps — no plugins needed!

Ready? Let’s dive in 👇

#sponsored

Step 1

Add your type, logo or icon on a dark background.

Step 2

Add some colored elements behind your main object. Feel free to use gradients, multiple colors and fun illustrations here!

Step 3

Set the objects' opacity to 1% and apply background blur.

Step 4

To make the text readable again, make sure to apply a white inner shadow with some horizontal offset. Tweak the offset and blur till it looks good for your object and has a similar effect as the example below.

Step 5

Now add another inner shadow, but with an offset in the other direction, so we can see all edges of the object. Make sure to decrease the opacity of this one, so it doesn't clash with the first inner shadow.

Step 6

Almost there! Add a rectangle that covers the entire artboard, choose a color and try out different blending modes to give your glass a colorfull tint. (I've used "overlay" in the example below)

Step 7

Add an oval on top of your object, set a color fill you like, make sure to set the blending mode to "screen", and apply some blur.

That's it!

To add some more moodiness to your visual, search for some foggy PNG's and add them as an overlay to your composition.

All set!

Are you trying out this technique? Make sure to share your result in the comments and tag @figma & @FonsMans to receive some feedback.

Did you enjoy this tutorial thread?

👉 Follow @FonsMans & @figma for more.
🔁 Like/Retweet the first tweet below

https://twitter.com/FonsMans/status/1651949422362906625