Skip to content
Make Color / 02

Free gradient generator

Good colors. Even better together.

Turn a handful of colors into a linear or radial gradient. Shape the blend, find the balance and take it straight into your design.

Create a gradient Free PNG, SVG & CSS · No sign-up
After Hours: A warm amber glow inside midnight blue.
After HoursAn editable Make preset

From a few colors to a whole mood.

For website backgrounds, presentation covers and digital artwork. Build the blend in your browser and export it in a useful format.

  1. 01

    Choose your colors

    Start from your palette or choose a curated preset. Add, edit or remove stops to use between two and eight colors.

  2. 02

    Shape the blend

    Choose linear or radial. Adjust the angle or move the radial center, then position each stop to control where colors meet.

  3. 03

    Take it into your project

    Copy the CSS background or export PNG and SVG. Choose landscape, square or portrait for the image you need.

A few starting points

Borrow a mood.
Make it yours.

Twelve curated presets across Earth, Soft, Vivid and Night. Every preset includes a palette and a paired gradient. Find these in Browse presets inside the tool.

Copper Bloom: Oxidized green, warm copper and chalk.

Copper Bloom

Earth

Oxidized green, warm copper and chalk.

Tidal Glass: Sea-glass green fading through mist blue.

Tidal Glass

Soft

Sea-glass green fading through mist blue.

Acid Orchard: Lime and tangerine against deep leaf green.

Acid Orchard

Vivid

Lime and tangerine against deep leaf green.

After Hours: A warm amber glow inside midnight blue.

After Hours

Night

A warm amber glow inside midnight blue.

Explore in the gradient tool
One project. Two perspectives.

Every gradient has a palette.

Switch to the Palette tab to explore individual colors, generate new combinations or export a set of swatches. Your colors come with you.

Discover the palette generator
#203E38#708D72#C78155#F2DFBC
A few useful details

Before you
start mixing.

Ask us a question ↗
What is a gradient generator?+

A gradient generator blends colors into a continuous background. Make creates linear gradients with a direction and radial gradients that spread from a center point, with editable color stops.

Is Make Color free?+

Yes. The palette and gradient tools are free, including PNG, SVG and CSS exports. You do not need an account. Make’s image and video effects editor has a separate Pro plan.

Can I export the gradient as CSS or an image?+

Yes. Copy a CSS background declaration, download a vector SVG or export a PNG. Image sizes are 1600 × 1000 for landscape, 1600 × 1600 for square and 1000 × 1600 for portrait.

Can I switch between palettes and gradients?+

Yes. Both tabs use the same project and colors. Edit your palette, switch to Gradient and adjust the blend. You can also work in either tool independently.

Will my work be saved?+

Your current project is saved locally in this browser. It is not synced to an account or another device. Export work you want to keep; clearing browser storage removes the saved project.

Does the CSS look exactly like the exported image?+

Make uses sRGB blending for its previews and exports. CSS gradients adapt to the element they fill, so a different aspect ratio can change the composition. Use PNG or SVG when you need a fixed composition.

Your next project starts here

Give your colors room to move.

Open the gradient generator