Creating a linear transparent gradient to a div
Why not keep it light and browser compatible.
div{ backgroud-image: url('images/gradient.png'); background-repeat: repeat-x; background-position: top right;}
You can do it with CSS3:
E.g.
div { opacity: 0.5; background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */}http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
I created it using jquery and 112 divs. A parent div for the ten lines of text divs each more transparent, and a background div with 100 divs each more transparent.