Transparent image with Glass effect export

Hey ​@Elona Sarkisova! Thanks for reporting - I’m going to check with engineering for further guidance and then update you when I hear more.

Hi ​@Elona Sarkisova, thanks for your patience! 

Kim is currently out of office, so I’m stepping in to help. 

Our team hasn’t been able to reproduce this issue so far. If you’re still having the issue, can you please verify what export settings you are using when you export and what you expect to see? 

With a few more details, our team can try to narrow down what may be causing this issue for you. 

Same for us, the glass effect disappears on export on a transparent background.

Hi ​@Nikolaus Heger, thanks for chiming in here and apologies for the delayed reply! 

Can you please verify what export settings you are using?

Please keep in mind the following:

• It’s best to export as PNG to preserve transparency and blur effects
• Glass effects are not supported in SVG export or within Figma Sites, as they rely on realtime background rendering
• Ensure your Glass effect is applied to a frame with a transparent fill (or lower opacity), and ensure the underlying background elements are included in the selection or exported as a single image

As long as you are meeting these export settings, you shouldn’t have any issues. Please let me know, and we can continue to troubleshoot, as needed.

I have the same issue. I cannot export the transparent glass or Blur effect.

Hey ​@Paul Gutjahr 👋 Sorry to hear this happened to you too. Looking at the posts above, can you please verify what export settings you are using?

Please note:

• It’s best to export as PNG to preserve transparency and blur effects
• Glass effects are not supported in SVG export or within Figma Sites, as they rely on realtime background rendering
• Ensure your Glass effect is applied to a frame with a transparent fill (or lower opacity), and ensure the underlying background elements are included in the selection or exported as a single image

Once I have more details, we can troubleshoot this together. Talk son! — Jaycee

I have the same issue. I export the frame with glass effect, it become a white png, and when i use my cursor agent to build code, it becomes just background blur effect. 

Hi ​@Slowly 👋 I wonder if we have two seperate issues here.

On the white PNG: could you share a screenshot of the Fill and Effects panels for that frame? One thing worth checking while you're in there: applying a glass effect automatically drops the layer's fill opacity to 20%, so if the frame's fill is white, a mostly-white export can be the expected result rather than a bug.

Two quick questions:

• Is anything sitting behind the frame when you export, or is the frame exported on its own? 
• Is this a design file, Figma Sites, or Make?

On the Cursor part —CSS doesn't have a true equivalent to glass, so backdrop-filter: blur() is generally the closest an agent can get. Can you make a seperate post for this part and we can dig in there? 

More on effects here: Apply effects to layers

Talk soon! — Jaycee

Hi ​@Jaycee Lewis, thank you for your quick reply. I’ve attached a few screenshots of my frame. It’s a design file, but the frame has no elements or fill color. When I export the frame as an image and then re-import it into Figma, nothing appears on it.

On the left is my original Figma design, while the right shows the selected exported image.

Here’s what my Cursor build looks like.

Hey ​@Slowly 👋 

Glass doesn't have any pixels of its own. It works like a lens, bending whatever sits beneath it.

Try this: select the background and the glass frame together and export the selection — or just export the parent T-Home frame. The glass should come through.

One heads up: there's no way to export glass on its own over transparency, since it needs something behind it to render. If that's what you're after, I'd love to pass it along as a feature request — you're not the first to ask.

For the Cursor build — CSS doesn't have a true glass equivalent, so backdrop-filter: blur() is about as close as it gets. No refraction or dispersion.

Talk soon! — Jaycee