Los gradientes en CSS son una herramienta sencilla y potente para darle vida al diseño de una web. No hace falta recurrir a imágenes, con unas pocas líneas de código puedes crear fondos atractivos, botones dinámicos o efectos visuales que llamen la atención.
En este artículo vas a descubrir cómo funcionan los gradientes lineales, radiales y cónicos, cuándo conviene usar cada uno y qué posibilidades creativas te ofrecen. Todo con ejemplos claros y fragmentos de código listos para usar, sin rodeos. Si trabajas con CSS, este contenido te va a venir muy bien.
Índice
- Tipos de gradientes en CSS
- Sintaxis y parámetros comunes
- ¿Cuál usar y cuándo?
- Ejemplos prácticos y fragmentos de código
- Herramientas y editores online
- Consejos y buenas prácticas
Tipos de gradientes en CSS
Degradado lineal (linear-gradient)
Es el tipo de degradado más utilizado. La transición de color ocurre a lo largo de una línea recta, que puede ser horizontal, vertical o diagonal.
Ejemplo:
background: linear-gradient(to right, red, orange, yellow, green, blue);Puedes modificar la dirección con valores como to bottom, 45deg o to left.
Degradado radial (radial-gradient)
El gradiente radial parte de un punto central y se expande en forma de círculo o elipse. Por defecto es una elipse, pero se puede ajustar.
background: radial-gradient(circle, red, yellow, green);Permite crear efectos tipo foco de luz o elementos centrados como botones o secciones destacadas.
Degradado cónico (conic-gradient)
Similar a un gráfico circular. Los colores se distribuyen en ángulos, rotando alrededor de un punto central.
background: conic-gradient(red, yellow, green, blue);Puede usarse para diales, indicadores o fondos visualmente llamativos.
Sintaxis y parámetros comunes
Cómo indicar colores y posiciones
- Admite cualquier color CSS válido:
red,#ff0000,rgb(255,0,0). - Se pueden especificar puntos de corte:
#ff0000 20%,#00ff00 60%. - Los gradientes pueden ser suaves o tener cortes bruscos según los valores.
Direcciones, ángulos y formas
- Lineales:
to right,to bottom left,45deg. - Radiales:
circle,ellipse,at center. - Cónicos:
from 45degpara girar el inicio del gradiente.
¿Cuál usar y cuándo?
Usos típicos del degradado lineal
Ideal para fondos de secciones, botones con hover, banners o separadores de contenido. Es el más versátil y compatible.
Casos prácticos de radial
Perfecto para llamar la atención sobre un punto central: CTA, iconos destacados, elementos centrados.
Usos creativos de conic-gradient
Se usa para fondos dinámicos, ilustraciones gráficas (gráficos circulares) o diseños modernos. Es menos común, pero potente visualmente.
Ejemplos prácticos y fragmentos de código
Botones y tarjetas
button {
background: linear-gradient(to right, #ff4e50, #f9d423);
border: none;
color: white;
padding: 1em 2em;
}Fondos hero y secciones
.hero {
background: radial-gradient(circle at center, #ffe259, #ffa751);
}Gráficos tipo pie chart con conic
.grafico {
background: conic-gradient(
red 0% 25%,
yellow 25% 50%,
green 50% 75%,
blue 75% 100%
);
border-radius: 50%;
}Animaciones y degradados repetidos
div.animado {
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
animation: mover 5s linear infinite;
}Herramientas y editores online
Generadores de gradientes CSS
Preprocesadores y compatibilidad
Todos los gradientes son compatibles con navegadores modernos. `conic-gradient` puede requerir un fallback visual en navegadores antiguos.
Consejos y buenas prácticas
Legibilidad y contraste
No uses degradados con texto encima si no hay suficiente contraste. Utiliza herramientas como WebAIM para validarlo.
Compatibilidad entre navegadores
Verifica en herramientas como Can I Use si todos los efectos funcionan correctamente. Algunos efectos como conic-gradient requieren revisión en Safari o navegadores antiguos.
Conclusión
Los gradientes en CSS son una poderosa herramienta para mejorar el diseño visual sin sacrificar rendimiento. Usando linear-gradient, radial-gradient y conic-gradient, se pueden lograr resultados profesionales sin imágenes externas.
La clave está en experimentar con ángulos, posiciones, colores y combinarlos con animaciones o interacciones. A partir de hoy, tu CSS puede destacar como nunca antes.
Deja una respuesta