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

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

A gradient generator is a tool for creating smooth transitions between two or more colors. Pick the type (linear, radial, or angular), adjust each color stop, and preview the result in real time. This gradient generator also lets you copy the CSS or open your gradient directly in Figma.

Start by choosing a gradient type — linear, radial, or angular. Then pick your colors and adjust the angle and stop positions until it looks right. Preview as you go, copy the CSS when you're done, or open it directly in Figma.

This tool supports three types: linear (a straight transition between colors), radial (a circular blend from the center outward), and angular (a sweep around a center point). Each type works well for different use cases, from backgrounds to buttons to full-screen UI elements.

Yes. Add up to 5 color stops, each with its own hex value, opacity, and position. For even more control, open your gradient in Figma to access unlimited stops and additional editing options.

Yes, the gradient generator is completely free to use.To bring a gradient into a design project, open it in Figma with a free Starter plan.

Yes. Once you've built your gradient, copy the generated CSS and drop it directly into your project. The tool outputs standard CSS gradient syntax that works across modern browsers.

A gradient is a smooth transition between two or more colors. Designers use gradients to add depth, direct attention, or create visual interest in backgrounds, buttons, illustrations, and other interface elements.

Explore More Tools

Open in Figma