Skip to content

CSS Gradient Generator

In-browser only Linear, Radial & Conic One-click Copy
⌘/Ctrl+⇧R randomize←/→ move stop
deg
#6366f1
%
#a855f7
%
#ec4899
%
Sunset
Ocean
Forest
Neon
Pastel
Monochrome
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
CSS Gradient Generator

Gradient · Linear · 3

Cmd/Ctrl+Shift+R random · Esc exit
Related tools View all

Overview

Design CSS gradients visually in your browser

Build linear, radial, and conic gradients visually. Adjust colour stops, choose a colour space, and copy the CSS — everything runs in your browser.

  • Linear, radial & conic gradients
  • HSB colour picker with eyedropper
  • OKLCH & LCH colour spaces
  • SVG & Tailwind export
  • Shareable permalinks
  • WCAG contrast overlay
  • 24 curated presets
  • Runs entirely in your browser
  • No data is uploaded or stored
  • Works offline once loaded
  • No account or login required
  • Create CSS background gradients
  • Design hero and banner backgrounds
  • Build button and card gradient styles
  • Explore linear, radial and conic gradients
  • Copy gradient CSS or Tailwind config

How to use

Build your gradient in four steps

  1. 1
    Choose a gradient type

    Select Linear, Radial, or Conic from the switcher at the top. Each type has its own set of controls for angle, position, and shape.

  2. 2
    Add and move colour stops

    Drag the handles on the gradient track to position each stop. Double-click the track to add a new stop. Click a stop to open the colour picker.

  3. 3
    Adjust angle and colour space

    Set the angle with the numeric input or click a direction preset. Choose a colour space (sRGB, OKLCH, LCH, HSL) to control how colours blend.

  4. 4
    Copy your CSS

    The live CSS output updates instantly. Click Copy CSS to copy to clipboard, or use the Export menu for SVG download, Tailwind, and shareable links.

Frequently Asked Questions

What is the difference between linear, radial, and conic gradients?
A linear gradient transitions between colours along a straight line at a given angle. A radial gradient radiates outward from a central point in a circle or ellipse. A conic gradient sweeps colours around a centre point like the face of a clock.
What does "colour space" mean in CSS gradients?
The colour space controls how intermediate colours are calculated between stops. sRGB is the default and most compatible. oklch and lch produce perceptually uniform blends with more vibrant midpoints. Specify it with the in <space> syntax: linear-gradient(in oklch, red, blue).
Which browsers support conic gradients?
Conic gradients are supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). Vendor prefixes are not required for conic gradients. The tool disables the Conic option if your browser does not support it.
How does the WCAG contrast checker work?
Toggle the contrast overlay to see WCAG 2.2 contrast ratios at 9 sample points across the gradient. Each badge shows whether the gradient colour passes AA (4.5:1 for normal text, 3:1 for large text) or AAA (7:1) against white or black.
Can I export my gradient as an SVG?
Yes. Open the Export menu and click Download SVG. Linear and radial gradients use native SVG gradient elements. Conic gradients are approximated with 360 polygon segments since SVG does not have a native conic gradient.
How do I use my gradient with Tailwind CSS?
Switch to the Tailwind tab in the output panel. The bg-gradient-to-* utility with from-[..] and to-[..] colour stops is generated only for 2-stop linear gradients that use a keyword direction (e.g. "to right"). For all other gradients — 3 or more stops, a custom angle, radial, or conic — the tool generates a bg-[image:linear-gradient(…)] arbitrary-value class, plus a backgroundImage entry you can add to your tailwind.config.js.
What is a shareable permalink?
When you click Share permalink in the Export menu, the full gradient state is encoded in the URL hash as Base64. Anyone with the link can open it and see exactly your gradient — no server, no account required.
What does OKHSV / OKHSL mean?
OKHSv and OKHSL are perceptual colour models built on top of OKLAB, offering more consistent hue and lightness across saturations. Since browsers do not yet have a native CSS okhsv space, the generator maps these to oklch when writing the interpolation hint.
Can I import an existing CSS gradient?
Yes. Open the Export menu and choose Import CSS. Paste your linear-gradient(), radial-gradient(), or conic-gradient() string (with or without the background: property) and click Import.