Radial gradient in Figma - Step-by-Step Guide

Introduction

Radial gradient lets you fill shapes with colors that spread out in a circle from the center. It helps make visuals look smooth and natural, like light or shadows.

When you want to create a button that looks like it has a light shining from the center

When designing a dashboard background that softly blends two colors

When highlighting a key number or chart area with a glowing effect

When making icons or shapes look three-dimensional with shading

When adding subtle color transitions to charts or cards for better visual appeal

Steps

Step 1: Select the shape or layer you want to fill

- Canvas or Layers panel

The shape is highlighted and ready for editing

Step 2: Click the Fill color box in the right sidebar

- Properties panel under Fill section

The color picker panel opens showing current fill color

Step 3: Click the dropdown arrow next to the solid color option

- Color picker panel

A list of fill types appears including Solid, Linear, Radial, Angular, and Diamond

Step 4: Select Radial from the fill type list

- Color picker panel

The fill changes to a radial gradient with default colors

Step 5: Click the color stops on the gradient bar to change colors

- Color picker panel under the gradient preview

The shape updates with the new gradient colors

Step 6: Drag the gradient handles on the shape to adjust size and position

- On the canvas over the selected shape

The radial gradient center and spread update visually on the shape

Before vs After

Before

Shape filled with a single solid blue color

After

Shape filled with a radial gradient from light blue in center to dark blue at edges

Settings Reference

Fill type

📍 Properties panel > Fill section > Color picker dropdown

Choose the style of color fill for the shape

Default: Solid

Color stops

📍 Color picker panel under gradient preview

Set the colors that blend in the gradient

Default: Two default colors for gradient

Gradient handles

📍 On the canvas over the shape

Adjust the position and size of the radial gradient

Default: Center in middle, spread covers shape

Common Mistakes

Trying to adjust gradient by changing fill color without selecting radial type

The fill stays solid color and does not show gradient controls

Always select Radial from the fill type dropdown before editing gradient colors

Not dragging gradient handles on the shape to position the gradient

Gradient stays centered and may not highlight the desired area

Use the on-canvas handles to move and resize the radial gradient for best effect

Summary

Radial gradient fills shapes with colors spreading out in a circle from the center

You select Radial from the fill type dropdown and then adjust colors and position

Use gradient handles on the shape to control where the colors start and end