Saltar al contenido

Degradados CSS

septiembre 23, 2021

Fondos Degradados


Los degradados CSS le permiten mostrar transiciones suaves entre dos o más colores especificados.

CSS define dos tipos de degradados:

  • Degradados lineales (baja / arriba / izquierda / derecha / diagonalmente)
  • Gradientes radiales (definidos por su centro)

Degradados lineales CSS

Para crear un degradado lineal, debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puede establecer un punto de partida y una dirección (o un ángulo) junto con el efecto de degradado.

Sintaxis

imagen de fondo: degradado lineal (dirección, color-stop1, color-stop2, …);

Dirección: de arriba a abajo (esto es predeterminado)

El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior. Comienza en rojo, pasando a amarillo:

de arriba a abajo (predeterminado)

Dirección: de izquierda a derecha

El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza en rojo, pasando a amarillo:

de izquierda a derecha

Ejemplo

#grad {
imagen de fondo: degradado lineal (a la derecha, rojo, amarillo);
}

Inténtalo tú mismo »

Dirección – Diagonal

Puede hacer un degradado en diagonal especificando las posiciones de inicio horizontal y vertical.

El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior izquierda (y va hacia la parte inferior derecha). Comienza en rojo, pasando a amarillo:

de arriba a la izquierda a abajo a la derecha

Ejemplo

#grad {
imagen de fondo: degradado lineal (abajo a la derecha, rojo, amarillo);
}

Inténtalo tú mismo »



Usando ángulos

Si desea tener más control sobre la dirección del degradado, puede definir un ángulo, en lugar de las direcciones predefinidas (hacia abajo, hacia arriba, hacia la derecha, hacia la izquierda, hacia abajo a la derecha, etc.). Un valor de 0deg es equivalente a «to top». Un valor de 90 grados es equivalente a «a la derecha». Un valor de 180 grados equivale a «abajo».

Sintaxis

imagen de fondo: degradado lineal (ángulo, color-stop1, color-stop2);

El siguiente ejemplo muestra cómo usar ángulos en gradientes lineales:

180 grados

Ejemplo

#grad {
imagen de fondo: degradado lineal (180 grados, rojo, amarillo);
}

Inténtalo tú mismo »


Uso de paradas de varios colores

El siguiente ejemplo muestra un degradado lineal (de arriba a abajo) con múltiples paradas de color:

Ejemplo

#grad {
imagen de fondo: degradado lineal (rojo, amarillo, verde);
}

Inténtalo tú mismo »

El siguiente ejemplo muestra cómo crear un degradado lineal (de izquierda a derecha) con el color del arco iris y algo de texto:

Fondo del arco iris

Ejemplo

#grad {
imagen de fondo: degradado lineal (a la derecha, rojo, naranja, amarillo, verde, azul, índigo, violeta);
}

Inténtalo tú mismo »


Usar transparencia

Los degradados CSS también admiten la transparencia, que se puede utilizar para crear efectos de desvanecimiento.

Para agregar transparencia, usamos la función rgba () para definir las paradas de color. El último parámetro de la función rgba () puede ser un valor de 0 a 1, y define la transparencia del color: 0 indica transparencia total, 1 indica todo color (sin transparencia).

El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza completamente transparente, pasando a rojo a todo color:

Ejemplo

#grad {
imagen de fondo: gradiente lineal (a la derecha, rgba (255,0,0,0), rgba (255,0,0,1));
}

Inténtalo tú mismo »


Repitiendo un gradiente lineal

La función repeating-linear-gradient () se utiliza para repetir gradientes lineales:

Ejemplo

Un gradiente lineal repetido:

#grad {
imagen de fondo: gradiente lineal repetido (rojo, amarillo 10%, verde 20%);
}

Inténtalo tú mismo »

close