Gradient Generator Tool

How to Design Beautiful, Buttery-Smooth Gradients

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. Adding a third color by hand is ridiculously difficult though. What gives?

Blame it on RGB, the default color system that computers use. In the middle of the “cube” formed by the RGB lies a line of gray, stretching from the white corner (cut out in the illustration below) to the black corner (the bottom corner farthest from the viewer).

In RGB, all the rich, saturated color is in the corners (6 of ‘em, anyhow). The center is gray.

Whenever you create a gradient that stretches between far-enough hues, the straight line connecting those colors (i.e. the default interpolation of the gradient) passes near the dreaded center of the cube – and you end up with an ugly muted middle of your gradient.

To fix this, you need to interpolate differently. (Duh 😉)

Probably easiest just to show you:

To get a gradient that avoids the gray dead zone, you don’t draw a straight line from A to B, you draw a biiiig curve.

Fortunately, that’s dead simple if we interpolate in a hue-based color system 🤓. Design apps and CSS don’t do that for you – so I made this tool!

Color Gradients in HCL, HSB, and HSL

You can create gradients in 3 different color systems in this tool (currently), which yield slightly different results:

• 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.

But what if you’re designing in-browser? No problem – 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.
• The Design Newsletter, where I send original design articles to 40,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? 😎