Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
<gradient>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
Resumen
El tipo de datos CSS <gradient> indica un tipo de <image> que consiste de una transición progresiva entre dos o más colores (Degradado).
Pruébalo
background: linear-gradient(#f69d3c, #3f87a6);
background: radial-gradient(#f69d3c, #3f87a6);
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
background: conic-gradient(#f69d3c, #3f87a6);
<section class="display-block" id="default-example">
<div id="example-element"></div>
</section>
#example-element {
min-height: 100%;
}
Un gradiente de CSS no es un <color> pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.
Funciones de las Gradientes
Hay tres tipos de gradientes de color:
Linear gradients (gradiente lineal)
Generados por la función linear-gradient(), donde el color se desvanece suavemente a lo largo de una línea imaginaria.
A rainbow made from a gradient
body {
background: -moz-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: -webkit-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: -ms-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: -o-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
Radial gradient (gradientes radiales)
Generados por la función radial-gradient(). Cuanto más lejos de un origen sea un punto, más lejos del color original será.
Radial gradient
body {
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll
0% 0% transparent;
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
Repeating gradient (gradientes de repetición)
Donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja.
Repeating gradient
body {
background: -moz-repeating-linear-gradient(
top left -45deg,
red,
red 5px,
white 5px,
white 10px
);
background: repeating-linear-gradient(
to top left,
red,
red 5px,
white 5px,
white 10px
);
}
Interpolación
Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando. (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent" del inglés transparente ( para más información hacer clic en el link))
Especificaciones
| Specification |
|---|
| CSS Images Module Level 4 # gradients |
Compatibilidad del navegador
Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.