Gradientes

8.1 Gradientes lineales (linear-gradient)

Los gradientes en CSS permiten crear transiciones suaves entre dos o más colores. Se utilizan para fondos, botones y otros elementos para añadir profundidad visual y atractivo. En CSS hay dos tipos principales de gradientes: lineales (linear-gradient) y radiales (radial-gradient).

El gradiente lineal crea una transición suave entre los colores a lo largo de una línea recta. La dirección de la línea y las transiciones de color pueden ajustarse con precisión.

Sintaxis:

    
      background: linear-gradient(direction, color-stop1, color-stop2, ...);
    
  

Donde:

• direction: dirección del gradiente. Puede indicarse con un ángulo (por ejemplo, 45deg) o con palabras clave (to right, to bottom, etc.)
• color-stop: define el color y su posición en el gradiente

Ejemplo 1: Gradiente lineal simple

En este ejemplo se crea un gradiente que pasa del rojo al azul de derecha a izquierda:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red, blue);
      }
    
  

Ejemplo 2: Gradiente lineal con ángulo

En este ejemplo, el gradiente va en un ángulo de 45 grados desde el amarillo al verde:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(45deg, yellow, green);
      }
    
  

Ejemplo 3: Gradiente lineal con varios colores

En este ejemplo, el gradiente va de arriba a abajo, pasando suavemente por cuatro colores: rojo, amarillo, verde y azul:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to bottom, red, yellow, green, blue);
      }
    
  

Ejemplo 4: Gradiente lineal con puntos de control

En este ejemplo se indican puntos de control que determinan la ubicación exacta de cada color en el gradiente:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
      }
    
  

8.2 Gradientes radiales (radial-gradient)

El gradiente radial crea una transición suave entre colores desde el centro o un punto determinado. El gradiente se expande en forma de círculo o elipse.

Sintaxis:

    
      background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
    
  

Donde:

• shape: forma del gradiente (circle o ellipse)
• size: tamaño del gradiente (closest-side, farthest-side, closest-corner, farthest-corner)
• position: posición del centro del gradiente (puede especificarse en píxeles, porcentajes o palabras clave como center, top, left, etc.)
• color-stop: define el color y su posición en el gradiente

Ejemplo 1: Gradiente radial simple

En este ejemplo se crea un gradiente radial que va desde el centro del círculo, pasando del rojo al azul:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, blue);
      }
    
  

Ejemplo 2: Gradiente radial con distinta posición

En este ejemplo, el centro del gradiente radial se desplaza hacia la esquina superior izquierda, creando una transición del amarillo al verde:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at top left, yellow, green);
      }
    
  

Ejemplo 3: Gradiente radial con varios colores

En este ejemplo, el gradiente va desde el centro del círculo, pasando suavemente por cuatro colores: rojo, amarillo, verde y azul:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, yellow, green, blue);
      }
    
  

Ejemplo 4: Gradiente radial con puntos de control

En este ejemplo se indican puntos de control que determinan la ubicación exacta de cada color en el gradiente:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
      }
    
  

8.3 Ejemplos con gradientes complejos

Ejemplo 1: Gradiente lineal con semitransparencia

En este ejemplo se utiliza semitransparencia para crear un gradiente de rojo semitransparente a azul semitransparente:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
      }
    
  

Ejemplo 2: Gradiente radial con tamaños

En este ejemplo se crea un gradiente radial elíptico que llena el lado más cercano del elemento:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(ellipse closest-side, red, blue);
      }
    
  

Ejemplo 3: Creación de gradientes para botones

Los gradientes pueden hacer que los botones sean más atractivos. Este gradiente va de arriba a abajo, pasando de verde claro a verde oscuro, dando al botón un efecto de volumen y profundidad:

    
      <button type="button" class="button">Button</button>
    
  

    
      .button {
        background: linear-gradient(to bottom, #4caf50, #2e7d32);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
      }
    
  

Ventajas de usar gradientes:

1. Atractivo visual. Los gradientes permiten crear transiciones suaves entre colores, añadiendo profundidad visual y atractivo a los elementos de diseño.

2. Flexibilidad. Los gradientes se pueden configurar para crear una variedad de efectos, desde simples transiciones hasta fondos multicolores complejos.

3. Soporte de diseño adaptable. Los gradientes se adaptan fácilmente a diferentes tamaños y resoluciones de pantalla, lo que los hace útiles para crear diseños web adaptativos.