Summarize this article with:
Flat colors feel dated. Gradients bring depth, energy, and polish to any design.
Learning how to make a gradient in Figma takes under three minutes, yet transforms buttons, backgrounds, and UI elements from basic to professional.
Figma offers four gradient types: linear, radial, angular, and diamond. Each serves different design needs.
This guide walks you through selecting objects, accessing the color picker, choosing gradient types, adding color stops, and adjusting direction.
By the end, you’ll create smooth color transitions for any shape, frame, or text element in your Figma projects.
How to Make a Gradient in Figma
Making a gradient in Figma is the process of applying a color transition to any shape, frame, or text element using the Fill section in the design panel.
Designers need gradients when creating buttons, backgrounds, hero sections, and UI elements that require depth and visual interest.
This guide covers 6 steps requiring 2-3 minutes and basic Figma familiarity.
Prerequisites
- Figma account (free or paid plan)
- Figma desktop app or browser version
- Basic understanding of the Figma interface
- A shape, frame, or text element ready on your canvas
- Time needed: 2-3 minutes
Step One: How Do You Select an Object for a Gradient Fill?
Click on any vector object, rectangle, frame, or text element on your Figma canvas to select it for gradient application.
The selected element displays a blue bounding box around it, and the right sidebar shows the design panel with fill properties.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Action
- Layers panel (left sidebar): Click on the layer name, or click directly on the object on canvas
- Selection indicator: Blue outline appears around the object
- Right sidebar: Design panel becomes active showing Fill, Stroke, and Effects sections
Purpose
Figma requires an active selection before any fill modifications. Without selecting an object first, the gradient options remain unavailable in the color picker.
Step Two: How Do You Access the Gradient Fill Options?
Click the color swatch under the Fill section in the right sidebar to open the color picker, then click the gradient icon (second icon from left) to switch from solid color to gradient mode.
The fill menu transforms to show gradient controls including color stops, gradient type dropdown, and rotation options.
Action
- Design panel > Fill section: Locate the colored square showing current fill
- Color swatch click: Opens the color picker popup
- Gradient icon (second from left): Switches view from solid to gradient controls
Purpose
The gradient icon activates Figma’s gradient fill mode. This reveals the gradient bar with color stops and unlocks all gradient customization features.
Step Three: How Do You Choose the Gradient Type?
Click the gradient type dropdown menu in the color picker to select from four options: Linear, Radial, Angular, or Diamond.
Each type creates different color blending effects suitable for various design applications.
Linear Gradient
Colors blend in a straight line from one point to another.
Best for buttons, hero image overlays, backgrounds, and call-to-action elements. The default gradient type in Figma.
Radial Gradient
Colors radiate outward from a central point in a circular pattern.
Works well for spotlight effects, glowing buttons, and circular UI elements like avatars or icons.
Angular Gradient
Colors progress clockwise around a center point, creating a sweeping effect.
Ideal for loading indicators, progress rings, and decorative circular elements.
Diamond Gradient
Colors spread outward from the center in four diagonal directions forming a diamond shape.
Useful for unique background effects and artistic design elements where standard gradients feel too common.
Purpose
Different gradient types serve different user interface needs. Selecting the right type before adjusting colors saves time and produces better results.
Step Four: How Do You Add and Adjust Color Stops?
Click anywhere on the gradient bar to add new color stops, click existing stops to change their colors, and drag stops left or right to reposition them along the gradient.
Each color stop controls one color in your gradient transition.
Action
- Add color stop: Click directly on the gradient bar where you want a new color
- Select color stop: Click any circular handle on the gradient bar
- Change color: Use the color picker below the gradient bar after selecting a stop
- Reposition stop: Drag the stop handle left or right
- Delete stop: Drag the stop away from the gradient bar, or select and press Delete
Purpose
Color stops define which colors appear in your gradient and where transitions occur. Adding multiple stops creates complex color palette effects with smooth blending between three or more colors.
Step Five: How Do You Change the Gradient Direction and Angle?
Drag the gradient handles directly on your selected object to change the gradient direction, length, and angle of the color transition.
The handles appear as a line with circular endpoints overlaying your shape.
Action
- Locate gradient handles: Look for the line with circles on your selected object
- Drag endpoints: Move either circle to change gradient angle and direction
- Adjust length: Move endpoints closer together for sharper transitions, farther apart for smoother blends
- Rotate gradient: Click “Rotate gradient” in fill menu for 90-degree rotation, or drag handles manually
Purpose
Gradient angle affects how colors flow across your design element. A vertical gradient feels different than a diagonal one. Direct canvas manipulation gives precise control over the exact gradient direction angle without guessing numerical values.
Step Six: How Do You Adjust Color Stop Opacity?
Click on any color stop in the gradient bar, then adjust the opacity slider below the color picker to control that specific color’s transparency level.
Each stop can have a unique opacity value from 0% (invisible) to 100% (solid).
Action
- Select color stop: Click the circular handle on the gradient bar
- Locate opacity field: Find the percentage input next to the color value
- Adjust opacity: Drag the slider or type a value between 0-100
- Preview result: Changes apply instantly on canvas
Purpose
Opacity control creates fade effects and transparent gradients. Useful for overlays on landing page images, glass effects, and subtle background transitions where full color intensity feels too heavy.
Verification
Check these indicators to confirm your gradient fill applied correctly:
- Visual check: Color transition visible on the selected object
- Fill section: Shows gradient preview thumbnail instead of solid color
- Gradient handles: Line with circular endpoints visible when object selected
- Color picker: Gradient icon highlighted, gradient bar shows your color stops
If the object still shows a solid color, reopen the color picker and confirm the gradient icon is active.
Troubleshooting
Issue: Gradient Not Appearing on Object
Solution: Check that the Fill section shows the layer as visible (eye icon). Verify the gradient icon is selected in the color picker, not the solid color icon.
If using a frame, confirm fill is applied to the frame itself, not just child elements.
Issue: Cannot Add More Color Stops
Solution: Click directly on the gradient bar line, not above or below it. The cursor changes to a plus sign when positioned correctly.
Zoom in on the color picker if the gradient bar appears too small.
Issue: Gradient Angle Looks Wrong
Solution: Select the object and drag the gradient handle endpoints directly on canvas. Click “Flip gradient” in the fill menu to reverse direction instantly.
For precise 45-degree or 90-degree angles, hold Shift while dragging handles.
Issue: Colors Not Blending Smoothly
Solution: Move color stops farther apart on the gradient bar. Colors positioned too close create harsh transitions instead of smooth color blending.
Add an intermediate color stop between contrasting colors for smoother results.
Alternative Method: Applying Gradient to Stroke
Figma supports gradients on strokes, not just fills. The process works identically but uses the Stroke section instead.
Gradient Fill Method
- Time: 1-2 minutes
- Location: Design panel > Fill section
- Best for: Shapes, backgrounds, buttons, frames, cards
Gradient Stroke Method
- Time: 1-2 minutes
- Location: Design panel > Stroke section
- Best for: Outlined icons, borders, decorative lines, SVG paths
Choose fill gradients for solid elements. Choose stroke gradients for outlined or line-based designs where only the border needs color transition.
Next Steps
After creating your gradient, explore these related Figma techniques:
- How to blur in Figma for combining gradients with blur effects
- How to make a button in Figma using gradient fills
- How to use components in Figma to save gradient styles as reusable elements
- How to create a design system in Figma with consistent gradient color styles
For web implementation, use a CSS Gradient Generator to convert your Figma gradient values into production-ready code.
FAQ on How To Make A Gradient In Figma
What Are the Four Gradient Types in Figma?
Figma offers linear gradient, radial gradient, angular gradient, and diamond gradient. Linear creates straight-line transitions. Radial radiates from center. Angular sweeps clockwise. Diamond spreads in four diagonal directions.
How Do I Add More Colors to a Gradient?
Click anywhere on the gradient bar in the color picker to add new color stops. Each stop represents one color in your transition. Add as many stops as needed for complex multi-color effects.
Can I Apply a Gradient to Text in Figma?
Yes. Select your text element, open the Fill section, and choose the gradient icon. The gradient applies directly to text characters. Works identically to applying gradients on shapes or frames.
How Do I Change the Gradient Angle?
Drag the gradient handles directly on your selected object. The line with circular endpoints controls direction and angle. Hold Shift while dragging for precise 45-degree increments.
Why Is My Gradient Not Showing?
Check that the gradient icon is active in the color picker, not the solid color icon. Verify the fill layer visibility in the design panel. Confirm you selected the correct object layer.
Can I Save a Gradient as a Color Style?
Yes. Click the four-dot icon in the Fill section and select “Create style.” Name your gradient style. It saves to your style library for reuse across the entire Figma file.
How Do I Make a Transparent Gradient?
Select any color stop on the gradient bar. Adjust the opacity slider below the color picker. Set one stop to 0% opacity and another to 100% for fade-to-transparent effects.
Can I Copy a Gradient from One Object to Another?
Select the object with the gradient. Copy it (Ctrl+C or Cmd+C). Select the target object. Use Edit > Paste Properties > Paste Fill Only. The gradient transfers instantly.
How Do I Delete a Color Stop from a Gradient?
Click the color stop you want to remove. Drag it away from the gradient bar until it disappears. You can also select the stop and press Delete. Minimum two stops required.
What Is the Difference Between Fill Gradient and Stroke Gradient?
Fill gradient colors the inside of shapes. Stroke gradient colors only the outline or border. Access stroke gradients through Design panel > Stroke section using the same color picker process.
Conclusion
You now know how to make a gradient in Figma using any of the four available types.
The process stays the same whether you’re styling a button, frame background, or text element. Select your object, open the fill menu, click the gradient icon, and customize.
Adjust your color stops for precise control over where transitions happen. Drag the handles on canvas to set the exact angle and direction.
Play with opacity settings on individual stops. This creates fade effects and transparent overlays that add depth to your designs.
Save frequently used gradients as color styles. Your design system stays consistent, and applying the same gradient across multiple objects takes one click.
Start simple with two-color linear gradients. Add complexity as you get comfortable with the gradient controls.
