Free Gradient Maker

Drag a few colors around and watch them blend. Build mesh, ombre, linear, and radial gradients in your browser, then copy the CSS or download a high resolution file. Free to use, no signup, no watermarks.

Make a gradient

BlendDistortGrain

Pick your colors, get a gradient

Drag the points to move each color. Start from a preset, or hit Randomize until something clicks.

Size

Style

Colors

Pick a style, then hit Randomize to roll another palette in it.

Adjust

Blend

Smoothing

Angle

Spread

Size

Softness

Distort

Detail

Finish

Grain

Vignette

Dither, removes banding

Download

Resolution

Format

Create beautiful gradients in seconds

Grain is the setting everyone sleeps on. It's the difference between a gradient that looks generated and one that looks shot. Push it to 100 and your colors pick up real texture, the kind that holds together on paper instead of breaking into stripes. Drag the handle. This is a true 1:1 crop of a 7680 by 4320 export, so what you see is exactly what lands.

Grain 100

No grain

Big gradients band. This one doesn't.

You know the stripes. They turn up where the color should be gliding, because an 8 bit file only has 256 steps per channel and a wide gradient needs more than that. It gets worse the bigger you go, which is exactly when you can least afford it. So every export runs a dither pass, and your eye reads the whole thing as smooth. Print it on custom stickers or a full size poster and it holds.

Our most popular mesh gradients for any creative project

Eight we keep coming back to. Take one as it is, or drop it into the maker above and make it yours.

Mesh, ombre, and the rest of it

A mesh gradient spreads your colors across the whole canvas at once instead of running them down a line, and every color sits on a point you can drag. Ombre is the same idea with a nicer name, a soft fade between two close colors that's forgiving on press, while linear and radial do what you'd expect.

Pull your colors out of a photo with the color palette generator, check them against text with the contrast checker, then send the file to the sticker maker or print it on custom stickers and business cards.

Perceptual color blending

OKLab keeps your midpoints as bright as your ends. Switch to sRGB if you need output that matches how a browser renders CSS by default.

Sized for screen and press

Square, story, and widescreen for screen. Sticker, business card, postcard, A4, and posters at 300 dpi with bleed already in.

Up to 16384 pixels

Multiply any size by 2x, 4x, or 8x. Huge files render in tiles and stitch back together, so nothing caps out at your browser's canvas limit.

Frequently asked questions

Yes. No account, no signup, no watermark, and no cap on downloads. It all runs in your browser, so nothing you make ever leaves your device.

A mesh gradient spreads your colors across the whole canvas at once, instead of running them down a line the way a linear gradient does. Each color sits on a point, and they bleed into each other based on how far apart those points are. Move one point and the whole thing shifts.

An ombre background is a soft fade between two colors, usually light to dark in the same family. It's a linear gradient with two stops and the smoothing turned up. Pick Linear, drop to two colors, set them a few shades apart, and push Smoothing to the top.

Up to 16384 pixels on the long edge. A widescreen at 4x gets you 15360 by 8640. Files that big eat a lot of memory, so any multiplier your browser can't handle greys out. Print sizes stop at 2x, because they start at 300 dpi and 600 is as high as a press can use.

Because most tools blend in sRGB, and sRGB doesn't match how your eyes read brightness. The middle loses light and goes muddy. We blend in OKLab instead, which keeps the midpoint as bright as the ends. It's the Color blending setting under Finish.

Yes, and they look great. Pick the Sticker size and you get 3 by 3 inches at 300 dpi with bleed already in. Leave dither on, because stripes show up faster on something that small. Then drop the file into the sticker maker for a cut line, or send it straight through as custom stickers.

Yes, for linear and radial. Hit Copy CSS and you get a rule you can paste straight into a stylesheet, interpolation space included, so the browser matches your preview. Mesh and blob can't be written in CSS, so those come out as images.

Yes. Whatever you make here is yours. Client work, brand systems, packaging, print, all of it. No licensing, no attribution, no strings.

Not exactly. Screens make light and paper only bounces it back, so saturated blues and greens shift on press. Export your PNG, run it through the RGB to CMYK converter, and see what the press can actually hit before you order. It also helps to know what the K in CMYK means, because a gradient fading to plain K prints a washed out grey when you wanted rich black.