Los degradados lineales son aquellos donde los colores pasan a través de una transicion y los podemos ver que pasan de un color a otra através de distintas direcciones como puede ser de arriba a abajo, de izquierda a dereha o a lo largo de caulquier eje de coordenadas X Y . Esta característica la podremos aplicar sobre aquellos elementos que soportan imágenes de fondo.Usaremos la sentencia linear-gradient. A continuación indicaremos ciertas cosas a tener en cuenta:

1. Valores : Dentro de los paréntesis de linear-gradient especificaremos la dirección del degradado y algunas pautas de color.

2. Dirección del degradado en grados : Podemos especificar la dirección del degradado através de angulos. Lo haremos con deg. 0deg apunta a la derecha y 90deg hacia arriba.

2. Dirección del degradado con palabras clave : También se puede especificar la dirección del degradado con las palabras claves top, bottom, left, right.

3. Colores : Una vez indicado la dirección, habrá que proporcionar los colores, esta parte se compone del color que se utilizará y del porcentaje o longitud del degradado que se quiere.

4. Degradados sin degradados : Se puede conseguir que los colores pasen de uno a otro pero sin que exista degradado para conseguir un color al otro. Esto provocará un efecto de rayas. Se consigue haciendo que el paso de un color a otro se coloque en la misma posición ambos colores. Vean en los ejemplos el numero 4.

Los degradados radiales : a diferencia del lineal este degradado empieza desde un punto hacia fuera de él de diferentes formas. Usaremos la sentencia radial-gradient A continuación indicaremos ciertas cosas a tener en cuenta:

1. Forma : La forma puede ser circle o ellipse siendo la última la predeterminada.

2. Tamaño : Pueden ser:

Los degradados repetidos : se pueden crear patrones en que se repita el diseño de degradado que hayamos creado. Para ello tendremos que usar la característica repeating-linear-gradient en el caso de un degradado lineal y si fuera radial repeating-radial-gradient.

Más información: