Skip to main content
Home / Articles /

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

I really like this subtle effect on the 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.