Gradient backgrounds are a really simple, yet effective way, to provide your website with a profession feel and make it really stand out. The best part about it? It’s real easy to do.

I used this very same technique to create the gorgeous-looking (if I do say so myself) category navigation panel at the top of my page and now I’m going to show you precisely how I built it.

Firstly, for this method it can work both horizontally and vertically, but either the width or height must be a set height. My category navigation panel was 50 pixels high, so I headed over to my Adobe Photoshop and created a new image with 1 pixel width, 50 pixel height (the dimension – either width or height – that it set by the CSS will always be 1px). Then, on the foreground and background colour palette, I firstly selected a coloured starting point – #333333 – for both options, then deselected the ‘web colours’ option and chose a colour a few shades lighter than the starting colour.

Why not two completely different colours? That’s fine if you want to do that, but for my tastes the best gradient effect is always garnered from two similar colours – it’s smoother and seamless and quite frankly, just looks better.

Zoom in on the image to get a better look at your pending effects by pressing CTRL and +, then fill in the image with any colour (it doesn’t matter, the gradient is going over the top of it).

Then go to ‘Add Layer Style’ (circled below) and select ‘Gradient Overlay’.

Once the option panel appears (as seen below), click on the gradient panel.

Select the small square box with the colour blending of your chosen foreground and background colours. Once selected, click OK and you should see the gradient take effect on your image.

Now you may choose which way you want the gradient to point, by selecting or indeed unselecting the ‘reverse’ option (it’s best to play around with this option to see which option suits you best). Save the image into your image directory and your gradient background image has been created.

Now, it’s time for the code. In your CSS file, create a new class where you want your gradient appear, set the width (mine was 100%) and your height to the set height of the gradient image. From here use the CSS background-image and call your image from the directory where it was stored. Finally use the background-repeat function and enter the value you of repeat-x.

Your CSS code should be something like below:

.navigation {
width: 100%;
height: 50px;
background-image: url(link to your image directory);
background-repeat: repeat-x;
}

From here, call to your CSS class in your XHTML/HTML/PHP etc file. When the page is then called up in the browser, you should see the gradient image repeated across the width of your CSS class in a smooth continuous gradient like below:

Like this fantastical post on Facebook!

Share this awesometastic post with your friends on Facebook!