Skip to main content
Question

Gradient Fill Doesn't Extend to Full Frame Height (Seems Clipped/Scaled to Viewport)

  • April 4, 2025
  • 1 reply
  • 25 views

Adrianna_Mamczarz

When a frame's height exceeds the visible screen area, its gradient background fill doesn't render correctly across the entire defined height of the frame specifically in the Prototype "Present" mode. In the Figma editor canvas, the gradient usually appears correct. However, when previewing, the gradient seems clipped or scaled as if only applied to the initially visible portion of the frame.

Expected behavior (Present Mode): The gradient should render smoothly across the full defined height of the frame, matching the editor view, irrespective of the viewport size during presentation.

Actual behavior (Present Mode): The gradient rendering is constrained or incorrectly scaled, seemingly limited by the viewport height, and doesn't cover the entire frame as defined and seen in the editor.

Is anyone else experiencing this?

Here’s an example:

https://www.figma.com/design/yUC9Cm0Qmrpfuc2XygBUTG/Untitled?node-id=0-1&t=qsD3lU73JrwIJ30g-1

 

1 reply

Adrianna_Mamczarz

Update: Heard back from Figma Support. They state this is intended behavior – top-level frames have special rendering in Present mode where fills can be clipped by the viewport, unlike how they appear in the editor.

The suggested workaround is to avoid filling the frame directly. Instead, add a Rectangle inside the frame, match its dimensions, apply the gradient there, and layer it behind everything else in the frame.

It's definitely a bit confusing and adds an extra step, especially for web designers who just expect a background fill to cover the whole frame consistently between design and preview. Hopefully, this workaround helps others facing the same issue!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings