Cita:
Iniciado por GekoDH 
background: linear-gradient(direction, color-stop1, color-stop2, ...);
http://www.w3schools.com/Css/css3_gradients.asp
http://jsfiddle.net/w5pue5jt/
PD: No puedo poner enlaces directos porque soy novato.
muchas gracias muy buena esa pagina!
otra duda como se puede poner una caja sobre otra haciendo este tipo de efecto?
Osea poner esa franja azul con el texto sobre o adentro de la caja blanca y hacer ese efecto de que agarra al bloque blanco(parte izquierda)?