Skip to content
Alert

Learn UI Design is open for new enrollments – for -- days -- hr -- min -- sec Get More Info

Close

Gradient Generator Tool

Gradient Type

Interpolation

Angle (deg)

Easing

Precision Help icon

swap colors

Export Gradient

Copy CSS Export as SVG

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.

RGB color system cube
Illustration modified from Wikipedia user SharkD

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:

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

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

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