Free [gradient] generator

A gradient is the fastest way to make a plain surface look considered. This free tool builds one live in your browser, hands you the exact CSS, and exports a high-resolution PNG. There is nothing to install and nothing to sign up for.

Set two, three, or four color stops, slide each one along the blend, and switch between a straight linear fade and a radial glow. Turn on grain when you want a softer, printed feel. Everything renders on an HTML canvas on your own machine, so your colors never touch a server.

Most gradients you see fall into a few shapes. Knowing which one fits saves a lot of fiddling, so here is what each does and when to reach for it.

The whole loop takes a few seconds. Pick your colors, shape the blend, and grab it as CSS or a PNG.

1
Set your color stops
Click a color swatch to open the picker and choose a hue. Use the slider next to each stop to move it along the gradient, and add or remove stops so you have anywhere from two to four colors in the blend.
2
Choose linear or radial
Switch between the two types. For a linear gradient, drag the angle slider to aim the blend, for example 90 degrees for left to right or 180 for top to bottom. A radial gradient rings out from the center automatically.
3
Add grain if you want it
Flip the film grain toggle to lay a subtle noise texture over the gradient. It is the quickest way to stop a large fill from looking flat or showing color banding on a big screen.
4
Copy the CSS or export a PNG
Click Copy CSS to grab the exact background declaration for a stylesheet, or pick an export size and click Download PNG for a ready-to-use image. Nothing uploads. The file is generated on your device.

The tool gives you the gradient in whichever form your project needs, so you never have to hand-write color math or eyeball an export.

Copy CSS

Copy CSS writes the precise background string to your clipboard, matching the type, the angle, and the position of every stop. A three-stop linear blend comes out as a single background: linear-gradient declaration you can paste straight into a stylesheet or a style attribute. It is the right choice for a website, an email template, or any layout that renders in a browser, because the gradient stays razor sharp at any size and adds no image weight.

Export PNG

When you need a real image, pick a size and download a PNG. The gradient is drawn at the full pixel dimensions you choose, so it stays crisp as a desktop wallpaper, a slide or document background, a 1200 by 630 social preview, or a phone screen. Because a PNG is a flat image, it also carries the grain texture, which pure CSS cannot reproduce on its own.

A gradient on its own is a background. The reason most people want one is to put something in front of it, and more often than not that something is a screenshot for a slide, a landing page, a changelog, or a launch post. Doing that by hand means exporting the gradient, opening a design app, dropping the screenshot in, adding padding, drawing a window frame, and faking a shadow. Every single time.

Kapshot collapses that into one step on your Mac. Take a screenshot and it lands on a tasteful gradient background inside a real macOS window frame with a genuine shadow, all with defaults you can adjust and then export or copy in one move. The gradients you can build here are exactly the kind it applies for you.

• Wraps any screenshot in a background, a window frame, and a real shadow the moment you capture it, with sensible defaults you can override.
• Keeps a whole set of shots consistent, so a run of captures matches instead of drifting shot to shot.
• Records the screen too, following your cursor with automatic zoom and capturing system audio and mic in one click for demos a still cannot show.

This tool covers the background. Here is how the three common routes stack up once you want the finished image with the screenshot in place.

The free tool is perfect when all you need is the gradient itself, as CSS or a PNG. When the gradient is really just the backdrop for a screenshot you take all the time, a native app that does the placement, the frame, and the shadow for you is the faster path.