Skip to content

Vivid Gradient Generator Tool

Gradient Type

Interpolation Help icon

Angle (deg)

Easing Help icon

Precision Help icon

swap colors

Export Gradient

Copy CSS Export as SVG

Why this gradient generator is better than others

When you try to create gradients across a wide range of hues, you often will see a gray dead zone ☠️™ in the middle of your gradient. Why is this worth a ridiculously ominous emoji? Because it means your gradients look like this:

HSB vs HCL color gradient interpolation
Color geeks: this is a slight approximation, since we’re squishing a cross-section of a cube into a circle.

Put simply: to get a gradient that avoids the dreaded gray dead zone ☠️, you don’t draw a straight line from A to B, you draw a biiiig curve.

Or, to be more accurate/geeky: we interpolate the gradient in a hue-based color system, such as HCL, HSB, or HCL (not RGB) 🤓. This avoids the line of gray that goes through the center of every color space. Design apps, online gradient tools, and even CSS all fail in this regard – so I made this tool!

Color Gradients in HCL, HSB, and HSL

Currently, you can create gradients in 3 different color systems in this tool, which yield slightly different results. Here's the skinny:

HCL vs HSB vs HSL gradient color comparison
  • HCL (hue-chroma-luminance): The default choice of this tool, HCL is an amazing color system that not only creates beautiful, rich gradients across a wide range of hues, but does so in a perceptually smooth way. If you were to view the gradient in grayscale, you’d see only a smooth transition from a lighter to a darker gray – preventing the awful “banding” that you’ll see in some hand-picked gradients. (Note: the perceptually uniform nature of HCL also makes it great for data visualization color palettes)
  • HSB (hue-saturation-brightness): While not perceptually uniform, sometimes HSB will offer a more interesting (and vivid) take on a gradient between two stops. In particular, if your HCL gradient has an ugly brown-yellow in it, try checking out the HSB version. HSB is a fantastic color system for designers, and I’ve written a comprehensive guide to HSB.
  • HSL (hue-saturation-lightness): HSB and HSL will often be very similar, particularly in bright gradients. Nonethless, sometimes it’s worth seeing both. Also, notice the pink “band” in the HSL gradient above – that’s essentially a little spike in brightness caused by artifacts of using a non-perceptual color system. Use HCL to avoid these. (Also: I’m often asked about the difference between HSB and HSL)

Exporting a Gradient as an SVG Image

Need to use one of these gradients in your design app – e.g. Figma, Sketch, or Adobe XD?

Simple – just press “Export SVG” and drag the file directly into your design app.

Dragging an exported SVG color gradient to Figma (also works for Sketch, Adobe XD, and Illustrator)

But what if you’re designing in-browser? First of all, stop. Use a design app, you silly. But presuming you're set in your ways, just grab the...

Gradient CSS (for linear, radial, and conic gradients)

It's dead simple to get the gradient CSS for any of the 3 types of gradients.

Simply press "Copy CSS" and add the code to the element you need it.

Copying color gradient CSS

Note: if you have other background properties set for the element in question, you can change the property from background to background-image 👍

More on Color

For more color tools and articles on using color in UI design, check out:

And, as always, send me feedback and feature requests. I aim for this to be the very best gradient tool on the web – so what do you want to see? 😎