Skip to main content

Gradient Generator

Generate beautiful gradients in just a few clicks.

CSS

background: linear-gradient(90deg, rgba(255, 47, 0, 1) 0%, rgba(224, 25, 208, 1) 100%)

Gradient settings

Stops

Open in Figma

Explore gradients

    Rouge

    Open in Figma

    Borealis

    Open in Figma

    Copper

    Open in Figma

    Meridian

    Open in Figma

    Phosphene

    Open in Figma

    Absinthe

    Open in Figma

    Tang

    Open in Figma

    Golden hour

    Open in Figma
See all gradients

Gradients of all types

Choose from linear, radial, and angular gradients to find the right look for your project. Adjust the angle, fine-tune your colors, and preview changes in real time.

Gradient settings panel with Linear selected, angle set to 90 degrees, and a pink-to-red gradient preview with editable color stop and hex value #E2006D.Gradient settings panel with Linear selected, angle set to 90 degrees, and a pink-to-red gradient preview with editable color stop and hex value #E2006D.
Multicolor linear gradient editor with three adjustable color stops transitioning from blue to yellow to green.Multicolor linear gradient editor with three adjustable color stops transitioning from blue to yellow to green.

Add up to 5 stops

Add up to 5 color stops to build complex, multi-tone gradients. Set the hex value, opacity, and position for each stop to get the exact blend you're after.

Take gradients further in Figma Design

The gradient generator gets you started—but Figma Design gives you full control. Here's how to build gradients directly in your design files.

Figma design panel showing a solid red fill with hex code #FD0202 set to 100 percent opacity.Figma design panel showing a solid red fill with hex code #FD0202 set to 100 percent opacity.

Create or select a frame or shape on the canvas and locate the Fill section in the sidebar.

Figma color picker displaying contrast ratio 3.36:1 with WCAG AA indicator and a red gradient selection.Figma color picker displaying contrast ratio 3.36:1 with WCAG AA indicator and a red gradient selection.

With the fill panel open, locate the row of icons at the top. The second icon represents the gradient option.

Figma gradient fill panel showing a linear red gradient with two color stops, hex value #FF0000, and opacity controls.Figma gradient fill panel showing a linear red gradient with two color stops, hex value #FF0000, and opacity controls.

With the gradient option selected, edit your gradient.

FAQs

Explore More Tools

Open in Figma