Radial gradient in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI designer creating a dashboard for your sales team.

📋 Request: Your manager wants a visually appealing dashboard background using a radial gradient to highlight the center area where key metrics will be displayed.

📊 Data: You have a blank dashboard canvas in Figma and need to apply a radial gradient background.

🎯 Deliverable: A dashboard background with a radial gradient that smoothly transitions from a bright center color to a darker edge color.

Sample Data

Property	Value
Canvas Size	1200px width x 800px height
Center Color	#FFD700 (Gold)
Edge Color	#004080 (Dark Blue)
Gradient Type	Radial
Gradient Position	Center of canvas

1

Step 1: Create a new rectangle shape covering the entire dashboard canvas (1200px by 800px).

Use the Rectangle tool in Figma and set width to 1200px and height to 800px.

Expected Result

A rectangle covering the entire canvas area.

2

Step 2: Apply a fill to the rectangle using a radial gradient.

In the Fill section, select 'Radial Gradient' from the fill type dropdown.

Expected Result

The rectangle fill changes to a radial gradient with default colors.

3

Step 3: Set the center color of the radial gradient to gold (#FFD700).

Click the center color stop of the gradient and enter the hex code #FFD700.

Expected Result

The center of the gradient is bright gold.

4

Step 4: Set the edge color of the radial gradient to dark blue (#004080).

Click the outer color stop of the gradient and enter the hex code #004080.

Expected Result

The edges of the gradient smoothly transition to dark blue.

5

Step 5: Adjust the gradient position to be centered on the canvas.

Drag the gradient center point to the center of the rectangle or set position coordinates to (600, 400).

Expected Result

The radial gradient is perfectly centered on the dashboard background.

6

Step 6: Adjust the gradient radius to cover the entire rectangle smoothly.

Drag the outer circle of the gradient fill to expand until it covers the rectangle edges.

Expected Result

The gradient smoothly transitions from gold in the center to dark blue at the edges.

Final Result

Dashboard Background
+------------------------------------------------+
|                                                |
|               (Bright Gold Center)             |
|                    *****                       |
|                 ***********                    |
|               ***************                  |
|             *******************                |
|           ***********************              |
|         ***************************            |
|       *******************************          |
|     *********************************         |
|   *************************************       |
|                                                |
+------------------------------------------------+

✓The radial gradient draws attention to the center where key metrics will be displayed.

✓The smooth color transition creates a professional and visually appealing background.

✓Centering the gradient ensures focus is on the dashboard's main content area.

Bonus Challenge

Create a radial gradient background that uses three colors: a bright center, a middle color, and a dark edge color.

Show Hint

Add an additional color stop between the center and edge colors in the radial gradient fill and adjust its position to create a smooth three-color transition.