Skip to content
Design · undefined

CSS Gradient Generator

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

In-browser only Linear, Radial & Conic One-click Copy
deg
#6366f1
%
#a855f7
%
#ec4899
%
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
Sunset
Ocean
Forest
Neon
Pastel
Monochrome

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. For simple two-stop linear gradients with a keyword direction, the tool generates a utility class like bg-gradient-to-r from-[#f97316] to-[#fbbf24]. For complex gradients it generates a backgroundImage config snippet you 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.