Skip to content

CSS Gradient Generator

Runs in your browser Linear, radial & conic One-click copy
R randomize←/→ move stop
deg
#6366f1
%
#a855f7
%
#ec4899
%
Sunset
Ocean
Forest
Neon
Pastel
Monochrome
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
Related tools View all

Overview

Design CSS gradients visually in your browser

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

  • Linear, radial & conic gradients
  • HSB color picker with eyedropper
  • OKLCH & LCH color spaces
  • SVG & Tailwind export
  • Shareable permalinks
  • WCAG contrast overlay
  • 24 curated presets
  • Runs entirely in your browser
  • No data is uploaded or stored
  • Runs in your browser — nothing is uploaded
  • 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 color 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 color picker.

  3. 3
    Adjust angle and color space

    Set the angle with the numeric input or click a direction preset. Choose a color space (sRGB, OKLCH, LCH, HSL) to control how colors 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 colors 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 colors around a centre point like the face of a clock.
What does "color space" mean in CSS gradients?
The color space controls how intermediate colors 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 color 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 output targets Tailwind CSS v4. A 2-stop linear gradient with a keyword direction (e.g. "to right"), stops at 0% and 100% and full opacity becomes bg-linear-to-r/srgb from-[…] to-[…]. Every other gradient becomes a single bg-[image:…] arbitrary-value class with spaces written as underscores, so it pastes into a class attribute as one token. You also get an @utility snippet to add to your main CSS file.
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 — nothing is stored on a server.
What does OKHSV / OKHSL mean?
OKHSv and OKHSL are perceptual color 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.