Make a Rollover Gradient behind your Navigation using CSS

    ●   Put a soft "gradient" behind your navagation using the a:hover tag.

Learn About:

Kuler Colors - Learn Skills for Choosing Color Schemes Gradient Tool Opacity - The same as Transparency

  •   This tutorial is part of the Art Genre, What in the World? and the Home Sweet Home Portfolio Projects.

This tutorial is part of a series:

1 - Navigation using List Tags     2 - Drop Shadow Rollover     3 - Gradient Rollovers    4 - 101_links_Dw.htm  

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open your Project in Dreamweaver ~

Last time you worked on Drop Shadows for your Rollovers.

This time, we create Gradients.


Open your style sheet again by Double-Clicking it.

styles panel

Step #2: a:hover ~

Look for your a:hover tag - yours may looks different, or you have to make one yourself …


Step #3: Background Gradients ~

Copy the following code …

    background: -webkit-linear-gradient( #fff, #000);
	background: -moz-linear-gradient( #fff, #000);
	background: -ms-linear-gradient( #fff, #000);
	background: -o-linear-gradient( #fff, #000);


… and paste it in your a:hover tag:

linear gradient body tag

Step #4: View your Gradient ~

Save your work and view it by hitting F12 or select small to see your black and white background, something like this:

Step #5: Hex Code Colors ~

Go to: and pick a color …

OR - if you chose your colors in the Kuler Colors tutorial in Illustrator, opne it and find the Swatches panel …

… click a color in Swatches, and then Double-Click the Fill color to see the Hex Code.

Step #6: Change your Top Color ~

Copy the Hex code numbers hex code and replace the gradient colors to match your theme …

… for something like this:

Do the same thing again with your bottom color until you get the gradient you like.

Step #7: Radial Gradient ~

Also try radial-gradient

radial gradient

… which does this:

Step #8: Keep Going ~

Also add a border radius to your rollover and see what that does …

border radius

Step #9: View Your Work ~

Hit small to view your work.


Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working…

Other Resources: and