Degradado radial de CSS

Degradado radial de CSS

La desgradación radial se define por su centro.

Para crear una desgradación radial, también debe definir al menos dos puntos de color.

sintaxis

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

por defecto,shape para el óvalo,size para el ángulo más lejano,position centrado.

Desgradación radial - puntos de color uniformemente espaciados (por defecto)

El siguiente ejemplo muestra una desgradación radial con puntos de color uniformemente espaciados:

Ejemplo

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

Prueba herself

Desgradación radial - puntos de color con intervalos diferentes

El siguiente ejemplo muestra una desgradación radial en la que los puntos de color tienen diferentes intervalos:

Ejemplo

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

Prueba herself

Se establece la forma

shape Los parámetros definen la forma. Puede aceptar los valores circle o ellipse. El valor predeterminado es ellipse (elíptica).

El siguiente ejemplo muestra una desgradación radial circular:

Ejemplo

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

Prueba herself

Se utilizan palabras clave de diferentes tamaños

size Los parámetros definen el tamaño de la desgradación. Puede aceptar cuatro valores:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Ejemplo

Se estableció una desgradación radial con diferentes palabras clave de tamaño:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Prueba herself

Desvanecimiento radial repetido

repeating-radial-gradient() La función se utiliza para desvanecimiento radial repetido:

Ejemplo

Desvanecimiento radial repetido:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Prueba herself

Propiedades de desvanecimiento CSS

La siguiente tabla enumera las propiedades de desvanecimiento CSS:

Atributo Descripción
background-image Establecer una o varias imágenes de fondo para un elemento.