Gradientes en CSS

Los gradientes en CSS permiten crear transiciones de color sin imágenes. Con ellos se logran fondos modernos, responsivos y estéticos.

Gradientes lineales

Un gradiente lineal cambia los colores a lo largo de una línea recta. La dirección puede indicarse con palabras clave (to right, to bottom) o ángulos (45deg).

En este ejemplo, se define un gradiente lineal de rojo a amarillo:

Gradientes radiales y cónicos

Un gradiente radial se expande en forma circular, mientras que un gradiente cónico varía los colores radialmente desde un punto central. Ambos ofrecen efectos visuales llamativos.

Ejemplo de gradiente radial

Un gradiente radial puede usarse, por ejemplo, para crear efectos de luz o resaltar un punto central.

Varios colores y puntos de transición

En los gradientes puedes definir varios colores y controlar la transición con puntos de parada específicos.

Gradientes transparentes

Con colores rgba o usando opacity puedes crear gradientes translúcidos, útiles por ejemplo para sombrear imágenes.

Gradientes repetidos

Las funciones repeating-linear-gradient y repeating-radial-gradient permiten crear patrones repetitivos en los fondos.

Consejos para usar gradientes

Con gradientes puedes crear superficies dinámicas y modernas. Aquí algunas recomendaciones:

• Evita usar demasiados colores, ya que puede resultar molesto.
• Usa colores transparentes (rgba) para lograr efectos sutiles.
• Combina varios gradientes con la propiedad abreviada <background> para obtener diseños más complejos.