Skip to main content
Brendan Murphy
Brendan Murphy
New Member
September 25, 2026
Question

Confusing gradient transparency setup

  • September 25, 2026
  • 1 reply
  • 30 views

Looking to better understand gradient behavior in Figma.

The example below shows a setup for a Skeleton loading layout/animation. The gradient sits above a background layer with a light grey color.

skeleton reference

 

I want the gradient to provide a small white highlight wave, animated across the background layer. It has stops of 0%, 24%, 48%, and 100%. Three of the stops are fully transparent (to match the CSS).

 

Even when set to fully transparent (#00000000), a fill color is present in the transitional areas. This should transition from white to transparent.

Currently, Figma requires setting the transparent color to match intended visual styling, here requiring setting the transparency to match the background layer. This feels like an unexpected setup step, and clunky.

Is this intended? How does this align to CSS?

 

 

1 reply

Jaycee Lewis
Figmate
Jaycee Lewis
Figmate
September 25, 2026

Hey ​@Brendan Murphy 👋 Thanks for your detailed post. I shared your feedback internally with this team. I’ll post back here with any questions or follow ups as I get them. We appreciate YOU and your feedback 🙌 — Jaycee

Terms & ConditionsAccessibility statement