I’m sure you’ve seen this new trend a time or two. Have you ever wondered how to create it yourself? Well, look no further, we’ve got you covered! Follow along with this blog, or if video is your thing – check out our Youtube video and work alongside our designer Matt as he breaks down step by step how to create a simple glass pane in Figma. 

 

Fill out the form below and instantly get access to the working Figma file for this project!

Figma Glass Pane Effect

 

Figma makes creating these glass panes super simple, however if this is your first time using the platform it may be challenging to navigate. We’ve made sure to include a few tips in this tutorial to get you started on the right foot.

Step One: Draw a Rectangle

It’s literally that simple. By selecting your rectangle tool from the top of the screen you can click anywhere inside your artboard to create a square. On the right you’ll see its specific dimensions. Here is where we will set our rectangle to be 500 pixels wide by 350 pixels tall. We’ll also go ahead and add a corner radius of 20 to this rectangle, just to get rid of those sharp 90 degree corners. The fill color doesn’t matter at this step.

 

Step Two: Apply Gradient

Now we’re going to apply a linear gradient to the rectangle. On the right side of your screen you’ll see the shape fill, default it’s set to a solid color. From the color picker, change the drop down to Linear instead of Solid. Starting from the top left corner and moving downward to the bottom right corner we want to apply a subtle gradient that starts with a fill of #EFEFEF at 60% opacity, and changes to the same fill color but at 8% opacity.

 

Step Three: Add Background Blur

Besides step one, this might be the easiest part of the whole process. For this step simply select your rectangle and add an “effect” from the right side of your screen. Drop Shadow is the first to apply by default, click the drop down and change it to Background Blur. We’re setting our intensity to 55%, but you may find that changing this number may be helpful depending on how you plan to use the glass pane. Don’t worry, this setting can always be changed later. You’re probably wondering now, “Did anything even change?”, the short answer is yes. But you won’t see the results for another few steps.

 

Step Four: Add a Stroke

Now that we’ve added a blur to the entire rectangle, let’s give the glass pane and edge. To do this we’re going to add a linear gradient stroke set to the inside at a thickness of 2. The settings, direction, and color values will be the exact same as our original rectangle. Once you’ve added this stroke you’ll see that your rectangle now has more dimension, looking more like real glass!

 

Step Five: Our Final Step

Lastly, we’ve got to add elements behind the rectangle. We’re adding just a few randomly colored circles to the background of this one. To really sell the effect try letting some of the elements fall behind the glass and to the side of it. You’ll instantly notice that the background blur we added in step three is what really creates the frosted glass technique within the area of our original rectangle. 

 

Now you’re done! Try resizing the rectangle, adding or removing shapes from the background, or changing your glass color within the gradients we made in steps two and four. This tutorial is super easy, once you’ve done it you’ll want to keep creating glass elements for all of your graphic design, Greenville NC needs!

Red Shark Digital is a superior full-service digital marketing agency that specializes in Web Design, SEO, Branding, and Digital Advertising. With offices across North Carolina including Raleigh, Greenville, and Wilmington, our team of digital marketing specialists are able to create catered solutions for your business needs. Our clients have allowed us to push the boundaries of web and creative design, while building innovative results for their company and their brand. These clients have encompassed multiple industries including higher education, healthcare, and major commercial franchises. Our wide range of clientele has allowed us to craft specialized strategies for businesses of all sizes while conveying our knowledge across a variety of platforms. We always strive to connect brands to customers, learn what we can do for your business today.

Join Our Newsletter