Degradados

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 21 de 43.

Los degradados en CSS te permiten crear transiciones suaves entre dos o más colores.

Comencemos con un degradado lineal simple:

/* Crea un degradado lineal de arriba hacia abajo */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Esto crea un degradado que transiciona desde el naranja (#ff9966) en la parte superior a un color rojizo (#ff5e62) en la parte inferior.

También puedes especificar la dirección y usar múltiples colores como en el siguiente ejemplo:

/* Create a linear gradient from left to right */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla CSS para una clase llamada sunset-gradient que aplique un fondo de degradado lineal. El degradado debe:

Ir de arriba hacia abajo
Comenzar con el color #FFD700 (gold)
Hacer la transición a #FF4500 (orangered)

Hoja de referencia

Los degradados CSS crean transiciones suaves entre colores utilizando la función linear-gradient():

/* Degradado lineal básico de arriba hacia abajo */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* Degradado lineal con dirección y múltiples colores */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Las direcciones comunes incluyen to bottom, to right, to left y to top.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.