DEV Community

Cover image for Not Another Gradient Generator

Posted on

Not Another Gradient Generator

The web is full of gradient generators. So I thought I'd make another one: Not Another Gradient Generator

It has some novel features though:

  • Generates linear, radial, and conic gradients.
  • Allows you to layer gradients to make complex designs.
  • Automatically adds colors to prevent gradients looking washed out.
  • Exports gradients as CSS, SVG, PNG, and JPEG.

Layered Gradients

I started this project with the goal of being able to replicate the instagram logo gradient in CSS. The instagram logo isn't a simple linear or radial gradient. It's complex and made by clever graphic designers using expensive software.

But CSS allows us to layer gradients on top of each other, by combining radial and linear gradients you can approximate the same thing:

Instagram logo gradient but all washed out

This almost looks like it, the main issue is that it's all washed out. The colors become less saturated in the middle of the gradient.

To solve this problem I wrote some code that adds higher saturated colors to fill in the gray-ish bits, and the results were much better:

Instagram logo gradient in CSS

Here's how it works…

HSLuv color interpolation magic

CSS and SVG color gradients tend to go gray in the middle where the colors converge. This is because they use the RGB color space.

Imagine you have a color gradient going from yellow to blue. rgb(255, 255, 0) to rgb(0, 0, 255). CSS and SVG will interpolate the R, G, and B values seperately. So the middle value of yellow and blue becomes rgb(128, 128, 128) which is gray:

Gradient going yellow to blue with gray in the middle

But we know that the middle color of yellow and blue is green. So, to fix that Not Another Gradient Generator converts the colors to HSLuv — a more human-friendly color space. Then it adds intermediary colors and converts it back to RGB for use on the interwebs:

Gradient going from yellow to blue with green in the middle

That's the gist of it. I hope you enjoy it, I'll leave you with some other gradients I've created using it:

Lens Flare (you can add this on top of images)

Lens flare created with CSS gradients

This horrible thing that makes me think of old DVD adverts for some reason:

horrible mess made with css gradients

This one that I dithered using another one of my tools: dither me this. Sort of interesting...

Dithered Gradient

That's all folks.

Warner Bros that's all folks background recreated with CSS gradients

Let me know what you think, and if you create a cool gradient, share a link with me in the comments, i'd love to see it.

Top comments (3)

the_riz profile image
Rich Winter

Wish it did CSS output!

shadowfaxrodeo profile image

It does!

Under export options -> CSS background image

Then a window containing the CSS code appears. You can also keep that window open and watch the code change as you change your gradients.

grahamthedev profile image

Very nice, I especially like the ability to reorder and stack different gradients.

One of the rare tools that got a browser bookmark for me! Love it ❤🦄