Not Another Gradient Generator
Tags: showdev, css, webdev, vue
Published: 2021-06-22 22:27:14

The web is full of gradient generators. So I thought I'd make another one: [Not Another Gradient Generator](https://doodad.dev/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24vtmk35oie7sg05xa0p.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hvjao5y5gew1izojahv.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f6okl13uzya5oewhyu8.png)


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](https://www.hsluv.org/). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8cgpxzvnqkfwikcj5tvb.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7e3iwapsa7u0cw666as.png) 


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

![horrible mess made with css gradients](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbnz8yvvplzbd6kxp459.png)

This one that I dithered using another one of my tools: [dither me this](https://doodad.dev/dither-me-this/). Sort of interesting...

![Dithered Gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pu60mfzlwcfxuf76ngv.png)

That's all folks.

![Warner Bros that's all folks background recreated with CSS gradients](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fru8iimazv2n42vo1blh.png)

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.