CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image

Published by Chris Coyier

I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the bottom of the page.

bottomfade1.png

This can be achieved with a transparent image that is in a fixed position on the page, like so:

#bottom_fade {
	z-index: 99;
	position: fixed;
	bottom: 0%;
	background-image: url("bottom-fade.png");
}

The high z-index helps insure it is the top-most layer.

bottomfade2.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]