Read my book

I wrote books about Webpack and React. Check them out!

Tuesday, April 12, 2011

CSS Gradient Fun - Rainbow + Overlay Gradients

You know what time it is? It's time for some CSS snippets. I've been working on a scalable color picker lately. CSS gradients provide an excellent way to handle the gradients needed.

Rainbow Gradient

Usually there's some kind of "hue" picker. You know, that rainbow kind of thing. If you have used CSS gradients before, this one's probably trivial for you. If nothing else, at least this one would make a really cheesy background for your site. :)

You can play around with the CSS at jsFiddle. The solution works both on Firefox and WebKit based browsers. I'm not too fond of the syntax. Hopefully they'll be able to merge it at some point. Writing a definition for each seems pretty wasteful.

There are some hacks around for Opera and IE as well. In case of Opera you might to utilize SVG. IE provides a special filter of its own.

Overlay Gradient

In addition we're going to need something to select color "saturation" and "value". Sometimes a circle (radial + circular gradient) is used for this. In this case I'll just settle using a box and handle blending needed there.

The gradient consists of three parts. There's a background color, vertical and horizontal gradients. They are composited together utilizing CSS z-index, opacity and absolute positioning.

As above you can find a sandbox at jsFiddle for this snippet as well.


I ported these solutions over from ColorJack picker. It uses Canvas to render the gradients but the idea is pretty much the same.

It's possible to merge these techniques with some other cool CSS tricks. If you come up with some cool gradient or something, let me know. :)