CSS Gradient Background Fade

Apr 02, 2008 | css | fyd

A quick and simple way to use a gradient background for you web site. Make the gradient look like it is fading out with no weird lines – just smoothness. It's really quite easy to do using CSS to edit the body property of the HTML document.

We will start off with the HTML. So, open a new document – I'll be saving mine as fade.html. Get the basic HTML shell written out and go ahead and add a link to a stylesheet – style.css. Now here is how we will layout the page for presentation purposes.

<html>
<head>
<title>Gradient Background Fade</title>
link to stylesheet
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="main"> main container
<p>Place holder text</p>

<div id="leftSide">left demonstration 
</div>

<div id="rightSide">  right demonstration 
<h1>Right Section</h1>
</div>
</div>
</body>
</html>

Note: if you copy and paste this you need to take out the 'main container', 'left demonstration', 'right demonstration' text – they are not to be in the code they are just comments I made.

Just a quick layout to show a couple uses of the gradient fade. Before we get to the CSS we need to make(or get) an image for the background. You can use Photoshop to create a simple gradient

In Photoshop create a new file – I'll make mine 10px wide by 400px high.
Pick the colors you want to use for your gradient – Take note of whatever the bottom color of the gradient is – we will need it later. If you double click on the color in the Tools pallet you can copy the hexadecimal number (# followed by six digits). Fill your file with the gradient and save it. Or right-click and save the images I used.
gradient gradient gradient

Now to the CSS

body
{
/*the color here #2c2721 was the bottom color
of my gradient image - a seamless fade*/
background: #2c2721 url(img/bg3.gif) repeat-x;
}

/*just a container to hold things*/
#main
{
	margin: auto;
	width: 700px;
	height: 600px;
	background: #ffffff;
}

#main p
{
	padding: 10px;
}

/*the area to the right with a gradient fade*/
#rightSide
{
	float: right;
	margin-right: 10px;
	height: 500px;
	width: 200px;
        /*#ffffff is the bottom color in gradient*/
	background: #ffffff url(img/rightbg.gif) repeat-x;
}

#rightSide h1
{
	color: #fff;
	margin-left: 5px;
}

/*left area with fade example*/
#leftSide
{
	float: left;
	height: 500px;
	width: 200px;
        /*#ffffff is bottom color in gradient*/
	background: #ffffff url(img/bg.gif) repeat-x;
	margin-left: 10px;
}

All the extra CSS is just formatting to show the examples. The background: is the property we need to worry about to make the gradient fade work. Use repeat-x to make it show up all the way across the page, but not repeat down the page.

The HTML
The CSS

download
Download HTML, CSS, and Images

Not the prettiest example, but you get the idea – pick the colors you want and make it look good.
example

Popularity: 100% [?]