Función de degradado radial () de CSS
Ejemplo
Un degradado radial con paradas de color uniformemente espaciadas:
#grad {
background-image: radial-gradient(red, green, blue);
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La función radial-gradient() establece un degradado radial como imagen de fondo.
Un gradiente radial se define por su centro.
Para crear un degradado radial, debe definir al menos dos paradas de color.
Ejemplo de gradiente radial:
Versión: | CSS3 |
---|
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
Function | |||||
---|---|---|---|---|---|
radial-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
Sintaxis CSS
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Value | Description |
---|---|
shape | Defines the shape of the gradient. Possible values:
|
size | Defines the size of the gradient. Possible values:
|
position | Defines the position of the gradient. Default is "center" |
start-color, ..., last-color | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Más ejemplos
Ejemplo
Un degradado radial con paradas de color separadas de forma diferente:
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
Ejemplo
Un degradado radial con forma de círculo:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Ejemplo
Un degradado radial con palabras clave de diferentes tamaños:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
páginas relacionadas
Tutorial de CSS: Gradientes de CSS