Degradados radiales CSS

Tabla de contenido

Degradados radiales CSS

Un gradiente radial está definido por su centro.

Para crear un degradado radial también debes definir al menos dos paradas de color.

Sintaxis

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

De forma predeterminada, la forma es elipse, el tamaño es la esquina más alejada y la posición es el centro.

Degradado radial: paradas de color espaciadas uniformemente (esto es el valor predeterminado)

El siguiente ejemplo muestra un degradado radial con paradas de color espaciadas uniformemente:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Degradado radial: paradas de color con espacios diferentes

El siguiente ejemplo muestra un degradado radial con paradas de color espaciadas de forma diferente:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Differently Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Establecer forma

El parámetro de forma define la forma. Puede tomar el valor de un círculo o una elipse. El valor predeterminado es elipse.

El siguiente ejemplo muestra un degradado radial con forma de círculo:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}

#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>
<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

</body>
</html>

Uso de palabras clave de diferentes tamaños

El parámetro size define el tamaño del degradado. Puede tomar cuatro valores:

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

Ejemplo

Un degradado radial con palabras clave de diferentes tamaños:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>Radial Gradients - Different size keywords</h1>

<h2>closest-side:</h2>
<div id="grad1"></div>

<h2>farthest-side:</h2>
<div id="grad2"></div>

<h2>closest-corner:</h2>
<div id="grad3"></div>

<h2>farthest-corner (default):</h2>
<div id="grad4"></div>

</body>
</html>

Repitiendo un gradiente radial

La función repeating-radial-gradient() se utiliza para repetir gradientes radiales:

Ejemplo

Un gradiente radial repetido:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="grad1"></div>

</body>
</html>