Skip to content
Kordu Tools Kordu Tools
Developer Tools Runs in browser Updated 08 Apr 2026

CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually with a live preview and color stop editor.

Color stops

0%
100%

Presets

CSS output
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Loading rating…

How to use CSS Gradient Generator

  1. Choose gradient type

    Select linear, radial, or conic to switch between gradient modes.

  2. Add and adjust color stops

    Pick colors using the color pickers or hex inputs. Drag position sliders to control where each color blends.

  3. Set direction or shape

    For linear, adjust the angle slider. For radial, choose circle or ellipse and set the centre position. For conic, set the start angle.

  4. Copy the CSS

    Click Copy CSS to copy the ready-to-use background declaration to your clipboard.

CSS Gradient Generator FAQ

What is the difference between linear, radial, and conic gradients?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient transitions from a centre point outward in a circle or ellipse. A conic gradient sweeps colors around a centre point like a color wheel. All three are native CSS and supported in all modern browsers.

How many color stops can I add?
Up to 10 color stops per gradient. Each stop has an independent color and position (0%–100%). Stops are sorted by position automatically.

Can I use this for Tailwind CSS?
Yes. The CSS output uses standard gradient syntax that works with Tailwind's arbitrary value syntax: `bg-[linear-gradient(...)]`. You can also add the value to your Tailwind theme's backgroundImage config.

What CSS property does this generate?
The tool outputs a `background:` declaration using the CSS gradient functions (linear-gradient, radial-gradient, conic-gradient). This property is supported in all modern browsers and can also be used as a `background-image:` value.

Is my data sent anywhere?
No. All generation happens in your browser. Nothing is uploaded or stored.

Background

The Kordu CSS Gradient Generator lets you build gradient backgrounds visually without hand-coding CSS. Three gradient types are supported:

  • Linear — straight gradients at any angle from 0° to 360°
  • Radial — circular or elliptical gradients from a configurable centre
  • Conic — sweep gradients rotating around a point

Add up to 10 color stops. Each stop has an independent color picker, hex input, and position slider. A gradient bar preview updates as you drag to show exactly how stops blend. Presets (Ocean, Sunset, Mint, Fire, Midnight, Radial Glow) let you start from polished combinations.

The CSS output uses the standard background: shorthand, compatible with all modern browsers. Copy it with one click and paste directly into your stylesheet, Tailwind config, or CSS-in-JS.

Common uses: hero section backgrounds, button gradients, card accents, divider lines, progress bars, and design system color ramps.

All generation runs in your browser. Nothing is uploaded or stored.

Related tools

Color Palette Generator

Generate harmonious color palettes using color theory. Complementary, triadic, analogous, and more.

Tint & Shade Generator

Generate tints (lighter) and shades (darker) from any base color. Exports CSS variables.

Color Picker

Pick any color and instantly view HEX, RGB, HSL, HSV, CMYK, alpha, and decimal values. Copy any format with one click.

HTML Encoder / Decoder

Encode the five HTML-special characters into entities and decode named, decimal, and hex entities back to text. Runs fully in-browser.