CSS Gradientes de fondo


Ejemplo

Los gradientes son nuevos tipos de imágenes, agregados en CSS3. Como imagen, los gradientes se configuran con la propiedad de background-image background o la taquigrafía de background .

Existen dos tipos de funciones de degradado, lineal y radial. Cada tipo tiene una variante de no repetición y una variante de repetición:

  • linear-gradient()
  • repeating-linear-gradient()
  • radial-gradient()
  • repeating-radial-gradient()

gradiente lineal()

Un linear-gradient tiene la siguiente sintaxis

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);
Valor Sentido
<direction> Podría ser un argumento como to top , to bottom , to right o to left ; o un ángulo como 0deg , 90deg .... El ángulo comienza desde arriba hacia arriba y gira hacia la derecha. Puede especificarse en grados , graduado , rad , o giro . Si se omite, el gradiente fluye de arriba a abajo
<color-stop-list> Lista de colores, opcionalmente seguidos cada uno por un porcentaje o longitud para mostrarlo en. Por ejemplo, yellow 10% , rgba(0,0,0,.5) 40px , #fff 100% ...

Por ejemplo, esto crea un degradado lineal que comienza desde la derecha y las transiciones de rojo a azul

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Puede crear un gradiente diagonal declarando una posición inicial horizontal y vertical.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

Es posible especificar cualquier número de paradas de color en un degradado separándolas con comas. Los siguientes ejemplos crearán un degradado con 8 paradas de color.

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

gradiente radial ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}
Valor Sentido
circle Forma del gradiente. Los valores son circle o ellipse , el valor predeterminado es ellipse .
farthest-corner Palabras clave que describen qué tan grande debe ser la forma final. Los valores son closest-side farthest-side closest-corner , el farthest-side closest-corner farthest-corner , la closest-corner farthest-corner closest-corner farthest-corner
top left Establece la posición del centro de degradado, de la misma manera que background-position .

Gradientes de repetición

Las funciones de degradado de repetición toman los mismos argumentos que los ejemplos anteriores, pero colocan el degradado en mosaico en el fondo del elemento.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}
Valor Sentido
-45deg Unidad de ángulo . El ángulo comienza desde arriba hacia arriba y gira hacia la derecha. Puede especificarse en grados , graduado , rad , o giro .
to left Dirección de gradiente, por defecto es to bottom . Sintaxis: to [y-axis(top OR bottom)] [x-axis(left OR right)] es decir, to top right
yellow 10% Color, opcionalmente seguido de un porcentaje o longitud para mostrarlo en. Se repite dos o más veces.

Tenga en cuenta que los códigos de color HEX, RGB, RGBa, HSL y HSLa pueden usarse en lugar de los nombres de color. Los nombres de colores se utilizaron para ilustrar. También tenga en cuenta que la sintaxis de gradiente radial es mucho más compleja que la de gradiente lineal, y aquí se muestra una versión simplificada. Para una explicación completa y especificaciones, vea los documentos de MDN