Skip to content
T
Tools.Town
Free Online Tools for Everyone
linear-gradient(...)

CSS Gradient Generator

100% Free

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

Real-time
Client-Side
Preset library
Angle135°
Color stops (2)
%
%
CSS
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

Embed This Tool

Easy to Embed

Add CSS 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/css-gradient-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="CSS Gradient Generator">
</iframe>

Share This Tool

Share Instantly

Share CSS 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 linear or radial
  2. 2 For linear: set angle. For radial: pick shape + position
  3. 3 Add up to 6 color stops, each with position 0-100%
  4. 4 Live preview shows the result; copy the CSS rule

Features

  • Linear + radial gradient types
  • 2-6 configurable color stops
  • Angle slider (0-360°) for linear
  • Shape (circle/ellipse) + position for radial
  • Curated preset library (Sunset, Ocean, Brand, Aurora)
  • 100% client-side

Frequently Asked Questions

What's the difference between linear and radial?
Linear sweeps colors along a line at a given angle (0° = bottom-to-top, 90° = left-to-right, 180° = top-to-bottom). Radial radiates outward from a center point, like a sunburst.
How many stops can I add?
Up to 6. More stops = more gradient transitions but also a busier look. 2-3 stops cover most design needs.
Why does my gradient look banded?
Browser limitations — banding shows up when colors are too close or the gradient covers a small area. Add intermediate stops at the same hue with slight lightness shifts to smooth it out.
📖

Want to understand the math?

Browse all guides →
How to Use CSS Gradient Genera
css

How to Use CSS Gradient Generator — Complete Guide

Learn how to build linear and radial CSS gradients visually using the free CSS Gradient Generator on Tools.Town — live preview, 6 color stops, preset library, no sign-up.

7 May 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.

CSS Clip-Path Generator

Visually craft CSS clip-path shapes — polygon, circle, ellipse and inset — with editable anchor points, ready-made presets, a live preview, and copy-ready CSS.

CSS Filter Generator

Visually compose CSS filters — blur, brightness, contrast, grayscale, saturate, sepia, invert, hue-rotate and opacity — on a live image preview, then copy clean CSS.

Glassmorphism Generator

Design frosted-glass UI cards with live backdrop-blur, transparency, saturation, border and shadow controls — copy ready-to-use CSS or Tailwind.

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 Design Tools All categories