Skip to content
T
Tools.Town
Free Online Tools for Everyone
Gradient Generator illustration

Gradient Generator

100% Free

Build CSS linear, radial, and conic gradients with a live preview, custom colour stops, and one-click copy — no sign-up, runs entirely in your browser.

Live Preview
Instant
100% Client-Side
No Sign Up
Gradient type
°
Color stops
%
%
Presets
Preview
CSS
background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);
With solid fallback
background-color: #fc466b; background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);

Embed This Tool

Easy to Embed

Add Gradient Generator to your website or blog in seconds.

  • Responsive design
  • Lightweight & fast
  • No backend required
  • Always up-to-date 
<iframe
  src="https://tools.town/embed/gradient-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="Gradient Generator">
</iframe>

Share This Tool

Share Instantly

Share Gradient Generator with anyone — no login required.

  • Shareable link
  • No login required
  • Works on any device
  • No account needed

Share via

Advertisement

How to Use

  1. 1 Pick a gradient type: linear, radial, or conic
  2. 2 Set the angle (linear/conic) or shape and position (radial/conic)
  3. 3 Add colour stops and drag each stop's position slider
  4. 4 Try a preset palette for an instant starting point
  5. 5 Copy the CSS — with or without a solid-colour fallback

Features

  • Linear, radial, and conic gradients in one tool
  • Live preview updates as you change every control
  • Two to six colour stops with per-stop position sliders
  • Six ready-made preset palettes to start from
  • Copy-ready CSS plus an optional solid-colour fallback
  • Runs entirely in your browser — nothing is uploaded

Why it Matters

Gradients add depth and personality to backgrounds, buttons, and cards, but hand-writing the CSS syntax — angles, stop positions, conic from-angles — is fiddly and easy to get wrong. A visual generator lets you design by eye and copy syntax that's correct the first time. That means faster styling and fewer cross-browser surprises.

★★★★★

Use Cases

Hero Backgrounds

Design eye-catching section and hero backgrounds in seconds

Buttons & Cards

Add tasteful gradient fills to UI components

Quick Prototyping

Iterate on colour direction live before committing to code

Cross-Browser CSS

Copy a solid-colour fallback alongside the gradient

What this tool does

The Gradient Generator builds CSS linear, radial, and conic gradients visually. Choose a type, set the angle or position, add colour stops, and copy CSS that’s ready to paste into your stylesheet — with an optional solid-colour fallback for older browsers.

How it works

The tool assembles a standard CSS gradient function from your inputs: linear-gradient(<angle>deg, …), radial-gradient(<shape> at <position>, …), or conic-gradient(from <angle>deg at <position>, …). The logic is a pure function — the same inputs always produce the same CSS.

Privacy

Everything runs locally in your browser. No values are uploaded, logged, or stored.

Frequently Asked Questions

What's the difference between linear, radial, and conic gradients?
A linear gradient blends colours along a straight line at a chosen angle. A radial gradient blends outward from a centre point in a circle or ellipse. A conic gradient sweeps colours around a centre point like a colour wheel, which is great for pie-chart-style fills.
How many colour stops can I add?
Between two and six. Each stop has a colour and a position from 0% to 100%, and you can change the effect simply by moving positions. Two stops give a clean fade; more stops let you build richer, multi-colour blends.
Why does the tool give me a solid-colour fallback?
Older browsers that don't understand a gradient declaration will ignore it. Declaring a plain background-color first means those browsers still show a sensible solid colour instead of nothing, while modern browsers use the gradient that follows.
Is my design sent anywhere?
No. The gradient is built entirely in your browser with JavaScript and CSS. Nothing you choose is uploaded, logged, or stored — refreshing the page clears everything.
Can I use the generated CSS commercially?
Yes. CSS you copy is standard code describing colours and positions — it isn't copyrightable output from us, so you're free to use it in any personal or commercial project.
📖

Want to understand the math?

Browse all guides →
CSS Gradients Explained
css gradient

CSS Gradients Explained: Linear, Radial and Conic

A practical guide to CSS gradients — how linear, radial, and conic gradients work, how colour stops and angles behave, and how to ship them with a fallback.

23 Jun 2026

5 min read

Related Tools You Might Like

Box Shadow Generator

Visually craft CSS box-shadow — offset, blur, spread, color, opacity, inset toggle, plus Material-style elevation presets.

Color Palette Generator

Generate harmonious palettes from any base color — complementary, analogous, triadic, tetradic, split-complementary, monochromatic.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

Base64 Encoder

Encode and decode text and files to Base64.

Color Picker

Native color picker with HEX/RGB/HSL output and recent-colors history. Click the swatch or type a hex — values update instantly.

Browse more free tools
More Developer Tools All categories