Skip to main content

Gradient Generator

Generate beautiful gradients in just a few clicks

CSS

background: linear-gradient(90deg, )

Gradient settings

Angle

Stops

    Open in Figma

    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 blue-to-light-blue gradient preview with editable color stop and hex value #09B9FFGradient settings panel with Linear selected, angle set to 90 degrees, and a blue-to-light-blue gradient preview with editable color stop and hex value #09B9FF
    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 purple fill with hex code #FD0202 set to 100 percent opacity.Figma design panel showing a solid purple 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 purple gradient selection.Figma color picker displaying contrast ratio 3.36:1 with WCAG AA indicator and a purple 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