Submit your widget

Very sample Fade Out the Bottom with text

Created 13 years ago   Views 10080   downloads 1824    Author Chris Coyier
Very sample Fade Out the Bottom with text
View DemoDownload
95
Share |

This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.

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");
}