Vivid Gradient Generator Tool

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:

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 LCH, HSB, or HSL (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 LCH, 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:

• LCH (luminance-chroma-hue): The default choice of this tool, LCH 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 LCH 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 LCH 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 LCH 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.

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.

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:

• Color in UI Design: A Practical Framework. My take on why color theory sucks, and what art school should be teaching instead.
• The Data Visualization Color Picker. Create multi-color, single-hue and divergent color schemes for your data visualizations.
• Design Hacks, my newsletter where I send original design tips and tactics to 50,000+ of my closest friends.

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? 😎