Gradientes en CSS
Gradientes en CSS: Más allá de las imágenes
La propiedad background-image, además de permitir establecer imágenes mediante la función url(), ofrece una poderosa herramienta visual: los gradientes. Antiguamente, para crear un degradado era necesario generar una imagen desde un editor gráfico. Hoy en día, gracias a CSS moderno, es posible crearlos directamente con código, de manera dinámica, flexible y sin necesidad de archivos externos.
¿Qué es un gradiente?
Un gradiente (o degradado) es una transición progresiva entre dos o más colores. Puede ser suave o abrupta, y orientarse en distintas direcciones o formas. Los gradientes permiten crear fondos atractivos y dinámicos sin sobrecargar el diseño con imágenes adicionales.
Tipos de gradientes disponibles en CSS
CSS proporciona tres funciones principales para generar gradientes:
| Función | Descripción |
|---|---|
linear-gradient() | Crea un degradado en línea recta, en cualquier dirección. |
radial-gradient() | Genera un gradiente circular o elíptico, desde un punto central. |
conic-gradient() | Produce un gradiente con forma de cono, girando desde el centro. |
Estas funciones se pueden aplicar directamente en propiedades como background-image, o bien a través del atajo background.
Ejemplo básico:
cssCopiarEditar.element {
background-image: linear-gradient(to right, red, orange, yellow);
}
Este código genera un degradado horizontal de rojo a amarillo, pasando por naranja.
¿Por qué se usa background-image?
Aunque un gradiente no es técnicamente una imagen, el navegador lo interpreta como tal: genera internamente una imagen con los valores definidos. Por eso utilizamos background-image en lugar de propiedades como background-color.
Gradientes repetitivos
CSS también permite crear gradientes que se repiten, generando efectos visuales como rayas, bandas o patrones cíclicos. Esto se logra anteponiendo el prefijo repeating- a las funciones anteriores:
| Función | Descripción |
|---|---|
repeating-linear-gradient() | Gradiente lineal que se repite indefinidamente. |
repeating-radial-gradient() | Gradiente radial repetido en círculos concéntricos. |
repeating-conic-gradient() | Gradiente cónico con repeticiones alrededor del centro. |
Ejemplo:
cssCopiarEditar.element {
background-image: repeating-linear-gradient(45deg, red, red 10px, white 10px, white 20px);
}
Este ejemplo genera un patrón diagonal de rayas rojas y blancas alternadas.
Es importante especificar los puntos de corte en los gradientes repetidos, ya que determinan cómo y con qué frecuencia se repite el patrón.
Consideraciones finales
- Las funciones de gradiente son compatibles con cualquier propiedad CSS que acepte imágenes de fondo.
- Se pueden combinar con otras imágenes o colores de fondo utilizando la propiedad abreviada
background. - Los gradientes permiten reducir el uso de imágenes pesadas, mejorando la velocidad de carga y la escalabilidad del diseño.