Webkit has a range of css3 properties for working with alpha transparent masks (see webkit.org). Firefox doesn’t support these yet, but if you want to implement a basic linear or radial (non-alpha) gradient mask, you can fake it by blending a gradient with the background colour of your page.
Set your image as the background image of a div, and give the div a width and a height.
div {
height: 384px;
width: 283px;
background: url('lich-king.jpg') no-repeat;
}Duplicate the background property:
div {
height: 384px;
width: 283px;
background: url('lich-king.jpg') no-repeat;
background: url('lich-king.jpg') no-repeat;
}Now paste a linear gradient property before the image value, with a comma after it (the order is important):
div {
height: 384px;
width: 283px;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgba(27,223,72,1)),color-stop(1, rgba(27,223,72,0))), url('lich-king.jpg') no-repeat;
background: -moz-linear-gradient(center bottom,rgba(27,223,72,1) 0%,rgba(27,223,72,0) 100%), url('lich-king.jpg') no-repeat;
}See the green colour fading in? That’s the linear gradient we’ve created (inspect the element!). Pretty ugly, huh? Lets look at some practical examples:
Linear gradient blend (right to left)
div {
height: 384px;
width: 283px;
background: -webkit-gradient(linear,right top,left top,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0))), url('lich-king.jpg') no-repeat;
background: -moz-linear-gradient(right center,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), url('lich-king.jpg') no-repeat
}Radial gradient blend
div {
height: 384px;
width: 283px;
background: -webkit-gradient(radial, 50% 50%, 120, 50% 50%, 140, from(rgba(255,255,255,0)), to(rgba(255,255,255,1))), url('http://nicolahibbert.com/wp-content/uploads/2010/09/lich-king.jpg') no-repeat
background: -moz-radial-gradient(50% 50% 0deg, circle closest-side, rgba(255,255,255,0), rgba(255,255,255,0) 85%, rgba(255,255,255,1)), url('http://nicolahibbert.com/wp-content/uploads/2010/09/lich-king.jpg') no-repeat;
}