Skip to content
I Hate Online Tools

CSS gradient generator

Linear, radial, or conic gradients with live preview.

Runs in this tab. The file stays here.

Preview
CSS
background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);

This runs in your browser. Nothing is uploaded.

About CSS gradient generator

Build linear, radial, or conic CSS gradients with a live preview and copyable CSS — nothing leaves the tab.

Gradient generators on the web often bury the CSS behind an account wall or inject a CDN snippet you did not ask for. This page is the controls, a preview swatch, and a CSS string you can copy. Linear, radial, and conic types are all here so you are not bouncing between three bookmarklets.

Pick a type, nudge stops and angles, and watch the preview update. When it looks right, copy the background (or background-image) declaration into your stylesheet. The preview styles only this page; it does not reach your production site until you paste.

For a share-image style gradient baked into a PNG, the generate/gradient tool is a different job. This one is authoring CSS. Box-shadow and border-radius generators sit nearby when you are polishing a card that also needs depth and rounding.

How to use CSS gradient generator

  1. 1Choose linear, radial, or conic and set colors and stops.
  2. 2Adjust angle or position until the preview matches what you want.
  3. 3Copy the generated CSS into your stylesheet.

What it won't do

  • CSS output only — no PNG export on this page.
  • No mesh-gradient painter; classic CSS gradients.

Common questions

Does the gradient generator change my live website?

No. It only previews here. You paste the CSS into your own files or design tool.

Can I use multiple color stops?

Yes — add and position stops in the controls. The output lists them in standard CSS gradient syntax.

Is this the same as the OG/share gradient image tool?

No. That generate tool exports an image. This page exports CSS for backgrounds and UI.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app