How to create a color spectrum with CSS3 gradients

Posted on February 28th, 2011 by adiaga in CSS, Design, Tutorials

Tags: -moz-linear-gradient, -moz-radial-gradient, -webkit-gradient, CSS, css3, CSS3 gradients

What do you want to achieve at the end of this tutorial is to create a color spectrum using only CSS rules, without using any images. Below you can see an image of what we want to achieve:

We will use the css3 gradient rules to create this effect.

We start by creating a simple box which we want to fill with some color.

<div class="color_box">&nbsp;</div>

And add the style:

.color_box
{
width:360px;
height:50px;
}

We then create a simple gradient using 2 colors:

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.1, #ff0000), color-stop(0.9, # ff00ff));

for webkit based browsers and:

background-image: -moz-linear-gradient(left center, #ff0000 10%, #ff00ff 90%);

for Firefox.

This will make our box look like:

This is the first step. Next we want to add another color to our gradient and we will continue with #0000ff .

To achieve the new gradient with 3 colors we will add the new color and change the percentages where the colors appear in the background image.

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.01, #ff0000), color-stop(0.5, #ff00ff), color-stop(0.99, #0000ff));

And for firefox:

background-image: -moz-linear-gradient(left center, #ff0000 1%, #ff00ff 50%, #0000ff 99%);

This will generate a background like:

Next step is to add another color. We continue with the next color from the color spectrum and add cyan #00ffff .

The code for webkit will look like:

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.01, #ff0000), color-stop(0.33, #ff00ff), color-stop(0.66, #0000ff), color-stop(0.99, #00ffff));

And for firefox:

background-image: -moz-linear-gradient(left center, #ff0000 1%, #ff00ff 33%, #0000ff 66%, #00ffff 99%);

The background image that will be visible in the browser will look like:

We will go over all the steps by adding all the main colors in the spectrum and get to the final version.

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.01, #ff0000), color-stop(0.08, #ff0088), color-stop(0.16, #ff00ff), color-stop(0.24, #8800ff), color-stop(0.32, #0000ff), color-stop(0.40, #0088ff), color-stop(0.48, #00ffff), color-stop(0.56, #00ff88), color-stop(0.64, #00ff00), color-stop(0.72, #88ff00), color-stop(0.80, #ffff00), color-stop(0.88, #ff8800), color-stop(0.99, #ff0000));

and the firefox version:

background-image: -moz-linear-gradient(left center, #ff0000 1%, #ff0088 8%, #ff00ff 16%, #8800ff 24%, #0000ff 32%, #0088ff 40%, #00ffff 48%, #00ff88 56%, #00ff00 64%, #88ff00 72%, #ffff00 80%, #ff8800 88%, #ff0000 99%);

We added more colors to the gradient to make the transition from color to color smoother.

The background image resulted from this code will look like this:

For the end we will add a few css 3 effects to give some depth to the box and round the corners. We will use border-radius and box-shadow to achieve this.

-moz-border-radius: 35px 15px / 15px 25px;
border-radius: 35px 15px / 15px 25px;
-moz-box-shadow:0 1px 2px #bbb;
-webkit-box-shadow:0 1px 2px #bbb;
box-shadow:0 1px 2px #bbb;

This will generate the following output:

As you have noticed the syntax is quite different between the two browser engines that support the gradient effect for background-image. In the future these will change when the specs for css 3 will become a standard in all browsers.

We only shown the solution to achieve this in firefox and webkit (safari, chrome) browsers because internet explorer and opera don’t support this css 3 rule yet. But we can get this effect in these browsers using a nice svg trick.

I will show you the svg code that generated the gradient and then show you how to link the svg file in css to appear as the background image.

We name this file gradient.svg and save it in the same folder as the html file.

To tell the box to use this svg file as background we will use: