En la web existen miles de paginas que utilizan imagenes degradadas en su sitio, que crean con algun software de diseño.Ahora con este simple codigo aprenderemos a degradar una imagen con CSS,para esto necesitamos hacer una imagen en fireworks (de preferencia) con degradado alfa, y guardada con extencion .PNG (pondre un par de imagenes en descarga, si gustas solo seria cosa de que cambies el tamaño y la utilices)Bueno ahora si manos a la obra


Degradado con CSS
PLAIN TEXT
HTML:

Nota: Puedes usar los divs que gustes pero no se te olvide llamara a la clase CSS

Y ahora el archivo CSS:

PLAIN TEXT
CSS:
  1. .degradado {
  2. width: 980px; height: 100px;
  3. background-position:center;
  4.  
  5. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
  6.  
  7. }
  8.  
  9. .degradado[class] {
  10. background-image:url(degradado.png);
  11. }
  12. .degradado2{
  13. width: 650px; height: 300px;
  14. background-position:center;
  15.  
  16. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado2.png');
  17. }
  18.  
  19. .degradado2[class] {
  20. background-image:url(degradado2.png);
  21. }

width y height:Aqui es donde modificaremos el tamaño, para adaptarlo a nuestra imagen

Demo 1 - Demo 2

Descarga las imagenes