CSS Gradient Opacity (not background)

Question

I know how to create gradient backgrounds with alpha, but what I want is to have my element have a gradient opacity. What I'm looking for is to have my div and all it's children have the opacity gradient applied to them.

Any way to do this? I only need it to work in webkit, as it's an in-house only project.

Answer 1

Make a gradient background, but use rgba colors. The last value will specify the opacity, 1.0 for fully opaque, 0.0 for fully transparent.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0)));

Above is a blue to transparent gradient.

Answer 2

The easiest thing is to make it a PNG. Or use a webkit mask!

http://css-tricks.com/webkit-image-wipes/