Función radial-gradient() de CSS

CSS 函数Funciones CSS

Ejemplos

El siguiente ejemplo demuestra un degradado radial: puntos de color distribuidos uniformemente.

#grad { background-image: radial-gradient(red, green, blue); }

Pruébalo »

Definición y uso

La función radial-gradient() crea una "imagen" mediante un degradado radial.

El degradado radial se define por un punto central.

Para crear un degradado radial, debes establecer dos colores de parada.

Ejemplo de degradado radial

Versión de soporte: CSS3

Soporte del navegador

Los números de la tabla indican la primera versión del navegador que soporta esta función.

El número especificado por "-webkit-", "-moz-" u "-o-" indica la primera versión con prefijo que admite esta función.

Función
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);
Valor Descripción
shape Determina el tipo de círculo:
  • ellipse (predeterminado): especifica un degradado radial elíptico.
  • circle: especifica un degradado radial circular.
size Define el tamaño del degradado. Valores posibles:
  • farthest-corner (predeterminado): especifica que la longitud del radio del degradado radial va desde el centro hasta la esquina más alejada del centro.
  • closest-side: especifica que la longitud del radio del degradado radial va desde el centro hasta el lado más cercano al centro.
  • closest-corner: especifica que la longitud del radio del degradado radial va desde el centro hasta la esquina más cercana al centro.
  • farthest-side: especifica que la longitud del radio del degradado radial va desde el centro hasta el lado más alejado del centro.
position Define la posición del degradado. Valores posibles:
  • center(predeterminado): establece el centro como el valor de la coordenada vertical del centro del degradado radial.
  • top: establece la parte superior como el valor de la coordenada vertical del centro del degradado radial.
  • bottom: establece la parte inferior como el valor de la coordenada vertical del centro del degradado radial.
start-color, ..., last-color Se utiliza para especificar los colores de inicio y fin del degradado.

Más ejemplos

Ejemplo

Puntos de color distribuidos de forma no uniforme:

#grad { background-image: radial-gradient(red 5%, green 15%, blue 60%); }

Pruébalo »

Ejemplo

Degradado radial circular:

#grad { background-image: radial-gradient(circle, red, yellow, green); }

Pruébalo »

Ejemplo

Uso de diferentes palabras clave de tamaño:

#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); }

Pruébalo »

Tutorial CSS:Degradados CSS3

CSS 函数Funciones CSS

Otras extensiones