Cómo Usar Gradientes En CSS: Lineales, Radiales Y Cónicos

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 45deg para 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

• CSSGradient.io
• WebGradients
• MyColorSpace

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.