Skip to main content

PNG exports of gradients should NOT contain transparent/translucent pixels

  • April 9, 2026
  • 0 replies
  • 9 views

Uhl
  • Active Member

[Reposting this since it’s been 8 months, it’s still an issue, and the original thread has been “closed for replies”]

When exporting frames with gradients to PNG, you'll get semi-transparent pixels—even when all gradient stops are 100% opacity. This happens whether the gradient is applied directly to the frame or on a separate layer, as long as there's no solid fill behind it.

 

 

The attached Figma file includes four test frames. Visually, they appear identical, but only the fourth frame—with a solid fill behind the gradient—exports as fully opaque. You can verify this with a tool like: PNG transparency checker; the first three exports contain semi-transparent pixels.

 

A workaround is to move the gradient to a separate layer, then apply a solid fill to the frame behind it, like the fourth frame in the attached file. This avoids the PNG transparency problem but adds unnecessary layer complexity. 

 

Repro Steps

  1. Create a new Figma Design file
  2. Add a frame
  3. With the frame selected, change its fill to Linear Gradient.
  4. In the Export panel, click the + (plus) button.
  5. Confirm export type is set to PNG
  6. Click Export Frame 1 (or whatever you named it)
  7. In a browser, go to: https://onlinepngtools.com/check-if-png-is-transparent
  8. Drag the exported frame into the Input PNG box.

Current Results

Image contains translucency.

Expected Results

Image is completely opaque.