Figma Gradients and Fills for UI: Linear, Radial, and Token-Safe Patterns

Quick answer

Fills in Figma are solid, gradient, image, or video paints on a layer. Select a layer → Fill in the right panel → choose Linear, Radial, or Angular gradient, then set stops and angles. For product UI, define 3–5 gradient styles (hero, subtle surface, accent chip) and bind stops to color variables so light/dark modes stay consistent (color tokens). Avoid unique 7-stop rainbows on every card—pair gradients with elevation (shadows guide) and document CSS linear-gradient() intent in Dev Mode (handoff checklist). More setup guides on the Figma guides hub.

---

Who this is for

• UI designers building marketing heroes, app headers, and accent surfaces.
• Design system leads deciding when gradients are tokens vs one-offs.
• Developers who need angle, stop positions, and fallback solid colors—not flattened PNG heroes.

---

Fill types: what to use when

Fill type	Controls	Best for	Handoff note
Solid	Single color / variable	Text, borders, flat surfaces	Maps to background-color
Linear gradient	Angle, color stops	Heroes, buttons, dividers	linear-gradient(angle, stops…)
Radial gradient	Center, radius	Spotlights, avatars, orbs	radial-gradient()
Angular	Center, sweep	Pie charts, gauges, decorative rings	Rare in app UI—document if used
Image	Crop, fill mode	Photos, textures	Export asset or URL spec
Video	Playback in prototype	Marketing demos	Not production CSS—export separately

Verdict: default screens to solid semantic tokens; add gradients only where brand or hierarchy needs them—not on every list row.

---

Build a linear gradient that scales

1. Select a frame or rectangle (heroes work best on frames, not loose groups).
2. In Fill, click the color swatch → switch type to Linear.
3. Click the gradient bar to add stops; drag stops to set position (0–100%).
4. Set angle on canvas with the on-canvas handle, or type degrees in the panel (e.g. 135° for common diagonal heroes).

Starter hero gradient (light mode)

Stop	Position	Role
Brand 600	0%	Strong edge
Brand 400	45%	Mid transition
Brand 100	100%	Soft fade into content

Common mistake: six stops with 2° hue shifts—developers cannot maintain that in CSS. Cap at four stops unless marketing owns the asset.

---

Radial and angular gradients in product UI

Radial works for:

• Soft glow behind icons (single-purpose decorative frame).
• Circular progress backgrounds when you are not using SVG arc components.
• Avatar rings—often easier as stroke + solid fill than heavy radial stacks.

Angular is niche in dashboards; if you use it for data viz, name the layer chart / angular / Q3 and link to a spec—do not reuse as a button fill.

For dark mode, duplicate gradient styles with desaturated stops or lower opacity on the bright stop (dark mode tokens).

---

Gradient styles vs variables (2026 workflow)

Approach	When to use	Maintenance
Color styles on stops (legacy)	Small files, few themes	Update style once
Variables on stop colors	Light/dark, brand modes	Swap mode in preview
Local styles per gradient	Fixed brand marketing gradients	Publish from library

Recommended: bind each stop to a semantic color variable (color/brand/strong, color/brand/subtle) so mode changes do not require redrawing angles.

Steps:

1. Create variables in your collection (variables explainer).
2. On a gradient stop, click the color → Libraries → pick the variable.
3. Test modes on a frame before publishing the style to the team library.

---

Image fills without breaking layout

For thumbnails and marketing collages:

1. Draw a shape or frame → Fill → Image → choose asset.
2. Set Fill vs Fit vs Crop—Crop for fixed aspect cards; Fill for full-bleed heroes.
3. Turn on Clip content on the parent frame for scroll regions (masks vs clip).

Export: image fills inside components should use export settings on the frame or a dedicated export slice—see production export.

---

Gradients + effects + accessibility

Combo	Risk	Mitigation
Gradient + drop shadow	Busy, low contrast text	Place text on solid scrim layer
Gradient + background blur	Glass effect overload	One frosted panel per view
Light text on gradient	Fails WCAG	Add 40–60% dark scrim; test with a11y plugins
Gradient behind form fields	Illegible inputs	Use solid surface/raised for inputs (forms guide)

Verdict: if body text sits on a gradient, run contrast check on the worst stop pair—not only the center.

---

Handoff: what engineers need

Document in Dev Mode or a README table:

Token / style name	CSS direction	Fallback solid
gradient/hero	linear-gradient(135deg, var(--brand-600), var(--brand-100))	var(--brand-500)
gradient/subtle-surface	linear-gradient(180deg, …)	var(--surface-1)

Note whether the gradient is decorative only—if yes, allow a single solid fallback for low-end devices.

Link Dev Mode for designers and semantic color system in the same spec page.

---

Common mistakes

1. Unique gradient per screen — audit and merge into shared styles.
2. Gradients on auto-layout children that resize oddly — apply gradient to parent frame, not every chip.
3. Exporting heroes as PNG by default — provide CSS spec first; PNG only for email or legacy CMS.
4. Ignoring dark mode until launch — bind stops early.
5. Mixing mesh-style complexity in a system file — keep experimental art in a sandbox page (organize files).

---

Troubleshooting

Gradient looks banded in export

Add a noise overlay in code, not always in Figma; or add a third mid stop. For PNG export, export at 2× (fix blurry exports).

Angle resets when resizing

Gradients on frames scale with the frame; on groups behavior differs—prefer frames for responsive heroes (responsive design).

Variable does not apply to a stop

Ensure the variable is color type and the file library is enabled. Detached instances will break bindings—relink from the published component.

Plugin “mesh” gradient does not match dev

Treat plugin output as marketing-only unless engineering signs off on implementation cost.

---

FAQ

Should buttons use gradient fills?

Only if brand guidelines require it—most systems use solid primary with gradient reserved for marketing components. Use interactive components for press states, not darker gradients per state.

Can I animate gradients in Figma prototypes?

Prototypes support smart animate between solid fills more reliably than between complex gradients. For gradient motion, spec CSS or Lottie in handoff—not frame-by-frame PNG.

How many gradient styles should a design system have?

Three to five named styles cover most products: hero, subtle background, accent, optional danger/marketing. More than that and teams will invent local overrides.

Do gradients work with team libraries?

Yes—publish styles or components with gradient fills from the library file; consumers should not detach unless theming a one-off campaign.

---

Recommended next steps

1. Audit your file for duplicate gradients and merge into shared styles with variable-bound stops.
2. Add dark mode stops and preview on one hero + one card pattern.
3. Read color tokens, effects/elevation, and dark mode preview so fills stay consistent end to end.

Gradients should clarify hierarchy, not decorate every layer—treat them like typography: fewer styles, applied deliberately.