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

Avatar of Chris Coyier
Chris Coyier on

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.


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.