Funky world of Juha

Bizarre and funky world of Juha

CSS Rainbows January 8, 2011

Filed under: CSS3 — juhq @ 3:18 pm

I was sitting on a bus and I started thinking.

How hard it is to create rainbows with CSS?

Is it possible?

Well, atleast for modern browsers it is possible! All you need to know is what are the colors in the rainbow (you can find it easily from wikipedia and then you might need some help from

After that, just add the box_gradient styles to your style, add enough stops (I added 6 stops, as two of the colors are almost identical) and voilà! You got some rainbows in your element!

.rainbow {
  background-image: -moz-linear-gradient(top, #9F59A1, #443090, #1E9FB6, #389C2D, #F7F619, #FB0B0B);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9F59A1),color-stop(0.2, #443090),color-stop(0.4, #1E9FB6),color-stop(0.6, #389C2D),color-stop(0.8, #F7F619),color-stop(1, #FB0B0B));

Small tip, if you want your rainbow be full height and width, add these styles.

.rainbow {
  height: 100%;
  width: 100%;
  position: absolute;

Demo can be viewed from (won’t work for IE)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s