Como hacer degradados en #CSS

Como hacer degradados en CSS - CableNaranja

¡Comparte nuestro contenido!

Aunque los degradados o gradientes ya no son tan utilizados como antes, todavía pueden ser un muy buen elemento visual en nuestros sitios y aplicaciones, si se utilizan correctamente. Por eso mismo, hoy revisaremos las opciones que tiene CSS para generarlos ¿Listos? ¡Manos a la obra!

¿Cómo funciona el degradado lineal?

Parar lograrlo, utilizaremos como background la propiedad linear-gradient que lleva al menos 3 parámetros:

  • Dirección: Es opcional y lleva cualquiera de los siguientes valores:
    • to right – A la derecha
    • to left – A la izquierda
    • to top – Hacia arriba
    • to bottom – Hacia abajo
    • angle: Cualquier ángulo de -360deg a 360deg
  • Color 1: El primer color, puede ser en mnemónico, hexadecimal o RGB
  • Color 2: El segundo color, puede ser en mnemónico, hexadecimal o RGB

Se pueden añadir más colores si se busca un gradiente más colorido e incluso a cada color se le puede añadir un porcentaje de presencia.

Hagamos pruebas con el degradado lineal

Hagamos un archivo HTML nuevo y añadimos un etiqueta <style></style> para hacer nuestras pruebas. Dentro de ella, apliquemos un degradado al body del documento:

body{
   background: linear-gradient(red, yellow);
} 

Y… no se ve muy convincente.

Como hacer degradados en CSS - CableNaranja

Corrijamos eso haciendo algunos ajustes. Primero necesitamos que la etiqueta <html> tenga un height de 100%

html{
   height: 100%;
}

Luego a nuestro body, le heredamos el height de su parent y eliminamos los márgenes.

body{
   height: inherit;
   margin: 0;
   background: linear-gradient(red, yellow);
}

¡Ahora ya se ve mejor!

Como hacer degradados en CSS - CableNaranja

Movamos el degradado a la derecha:

background: linear-gradient(to right, red, yellow);
Como hacer degradados en CSS - CableNaranja

Ahora de arriba a la izquierda:

background: linear-gradient(to top left, red, yellow);
Como hacer degradados en CSS - CableNaranja

¿Qué tal si le damos un ángulo de 45 grados?

background: linear-gradient(45deg, red, yellow);
Como hacer degradados en CSS - CableNaranja

Démosle una transparencia del 50%

background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255,255, 0, 0.5));
Como hacer degradados en CSS - CableNaranja

Finalmente, añadamos un color verde que ocupe el 60% del degradado

background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255,255, 0, 0.5), green 60%);
Como hacer degradados en CSS - CableNaranja

¿Cómo funciona el degradado radial?

Similar al degradado lineal, tenemos diferentes valores que se pueden combinar:

  • Forma: Es opcional, puede ser circle (círculo) o ellipse (elipse)
  • Tamaño: Es opcional, se refiere al tamaño y ubicación del radio, los valores pueden ser:
    • closest-side: El lado más cercano
    • farthest-side : El lado más lejano
    • closest-corner: La esquina más cercana
    • farthest-corner: La esquina más lejana
  • Color 1: El primer color, puede ser en mnemónico, hexadecimal o RGB
  • Color 2: El segundo color, puede ser en mnemónico, hexadecimal o RGB

Los colores también se pueden definir en porcentajes si es necesario.

Hagamos pruebas con el degradado radial

Comencemos con un degradado simple:

background: radial-gradient(red, yellow);
Como hacer degradados en CSS - CableNaranja

Lo hacemos circular y que el amarillo ocupe el 60%

background: radial-gradient(circle, red, yellow 60%);
Como hacer degradados en CSS - CableNaranja

Enviamos 60% al lado más lejano y añadimos un tercer color:

background: radial-gradient(farthest-side at 60%, red, yellow, orange);
Como hacer degradados en CSS - CableNaranja

Finalmente, lo hacemos circular, le ponemos 7% de amarillo y 20% de naranja

background: radial-gradient(circle, red, yellow 7%, orange 20%);
Como hacer degradados en CSS - CableNaranja

Consideraciones finales

Es importante notar, que el truco que se hizo al principio sólo aplica para el <body> ya que en algunos navegadores no se interpreta correctamente sin esto. En cualquier otro tipo de etiqueta funciona normalmente. También es necesario considerar las funciones repeating-radial-gradient y repeating-linear-gradient que sirven para repetir el degrado.

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares