Índice

Degradado de color

1. Degradados lineales

El módulo CSS Image Values and Replaced Content Module Level 3 permite aplicar degradados lineales y radiales. Las propiedades utilizadas se reconocen perfectamente en todos los navegadores recientes.

background: linear-gradient

punto de partida;

color inicial;

color final;

Comentarios

El valor punto de partida se determina con top (por defecto), left, right o bottom. También puede utilizar grados para definir el ángulo del eje según el cual se realizará el degradado.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <title>Degradados</title> 
    <meta charset="UTF-8" /> 
    <style> 
         .degradado-blanco-negro { 
               width: 500px; 
               border: 1px solid #333; 
               padding: 5px;  
               background: linear-gradient(180deg, white , black ); 
         }  
         div.degradado-blanco-negro p {  
               margin: 0;  
         }  
    </style>  
</head>  
<body>  
    <div ...