Gradientes
Gradientes lineares, linear-gradient Dirección del gradiente Posición del color Inicio y final del color Propiedad repeating-linear-gradient

Gradientes lineares, linear-gradient

Los gradientes más conocidos o más fáciles son los gradientes lineales, donde tenemos una transición progresiva entre dos colores. La sintaxis es la siguiente:

linear-gradient (color, color, …): gradiente de colores hacia abajo
linear-gradient (dirección, color, color, …): gradiente con dirección específica
linear-gradient (dirección, color tamaño, color tamaño, …): gradiente indicado dónde comienza a cambiar el color
linear-gradient (dirección, color tamaño tamaño, color tamaño tamaño , …): gradiente indicando el inicio y final de cada color.

Por ejemplo, si queremos crear un degradado con los colores azul – rojo desde arriba hacia abajo sería:

.element {
    background: linear-gradient(blue, red);
}

El ejemplo anterior sería un ejemplo básico, vamos a ver un poco más el resto de parámetros que le podemos decir a esta propiedad.

Dirección del gradiente

La dirección puede ser tanto un número de grados como “una palabra clave” que nos indique la dirección. Por ejemplo, las palabras claves asociadas a los grados serían:

to top: correspondería a 0 ó 360deg
to top right: correspondería a 45deg
to right: correspondería a 90deg
to bottom right: correspondería a 145deg
to bottom: correspondería a 180deg
to bottom left: correspondería a 215deg
to left: correspondería a 270deg
to top left: correspondería a 325deg

.element {
    background: linear-gradient(to right, blue, red);
}

Posición del color

Por defecto, las distancias entre los colores se ajustan automáticamente, pero si queremos cambiarlas debemos poner un tamaño (en porcentaje o píxel) después del color. Este porcentaje o pixel representa el punto central del color que lo precede respecto al tamaño del gradiente completo.

.element {
    background: linear-gradient(to right, blue 50%, red 75%);
}

Inicio y final del color

Podemos establecer un punto de inicio y fin del color. Podemos declarar varias paradas de color. Por defecto, si un color tiene 0% como inicio el primer color declarado empezará ahí, del mismo modo, si el color no tiene establecido el final se considerará que parará en el 100%. Veamos tres linear-gradient que hacen lo mismo:

.element {
    background: linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
    background: linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
}

Propiedad repeating-linear-gradient

Si en lugar de utilizar la función linear-gradient usamos repeating-linear-gradient podemos hacer que el patrón de colores se repita de forma continua. El navegador se va a encargar de repetirlos hasta que no quede más espacio en el html seleccionado.

.element {
    background: repeating-linear-gradient(to right, blue 0% 10%, yellow 10% 20%, red 20% 30%);
}

Apartados de esta sección

radial-gradient

conic-gradient

<< Opacity radial-gradient >>