Tendencias de gradientes CSS 2025: conic, mesh y aurora
El diseño web de 2025 está marcado por gradientes mucho más complejos y expresivos que los lineales simples de décadas anteriores. Los gradientes cónicos (conic-gradient), los gradientes de malla (mesh gradients) creados con múltiples radial-gradients superpuestos, y el efecto aurora de colores neón sobre fondos oscuros son las tendencias más prominentes. Esta guía explora estas técnicas con ejemplos de código que puedes adaptar con el apoyo de WikiPlus Generador de Gradientes para los componentes base.
Gradientes cónicos: patrones angulares y ruedas de color
El gradiente cónico (conic-gradient) es diferente a los lineales y radiales: en lugar de transicionar entre puntos opuestos, gira alrededor de un punto central como los segmentos de un reloj. background: conic-gradient(from 0deg, red, yellow, green, blue, red) crea una rueda de color completa. conic-gradient(from 0deg, #FF6B6B 0deg 90deg, #4ECDC4 90deg 180deg, #45B7D1 180deg 270deg, #6C5CE7 270deg 360deg) crea un cuadrado de cuatro cuadrantes de color. Los gradientes cónicos son perfectos para gráficos de pastel CSS, loaders circulares con gradiente, y patrones decorativos en ángulo.
Mesh gradients: profundidad líquida en múltiples colores
Los mesh gradients son el efecto visual más solicitado en diseño web de 2024-2025. Se crean superponiendo múltiples radial-gradients semitransparentes con blur, cada uno con un color diferente y un punto de origen diferente. El código resultante es largo pero el efecto es espectacular: background: radial-gradient(ellipse at 20% 20%, rgba(255,100,100,0.5) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(100,100,255,0.5) 0%, transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(100,255,100,0.3) 0%, transparent 70%), #1a1a2e. Ajusta los colores, posiciones y porcentajes para crear variaciones únicas. WikiPlus genera los gradientes individuales que luego combinas.
Efecto aurora: neón sobre fondo oscuro
El efecto aurora combina gradientes radiales semitransparentes en tonos neón (verde, cian, morado) sobre un fondo muy oscuro, imitando las luces del norte. Es muy popular en landing pages de productos tecnológicos y SaaS. La implementación básica: body { background: #050a0e; } y un elemento decorativo: .aurora { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,255,200,0.15) 0%, transparent 70%); filter: blur(40px); }. Múltiples instancias de este elemento con diferentes colores y posiciones crean el efecto completo. El filtro blur es el elemento clave para suavizar los bordes.
Gradientes con hard stops: bandas y patrones geométricos
Los gradientes con paradas de color sin transición (hard color stops) crean bandas de color nítidas sin degradado. La técnica usa dos paradas en la misma posición: linear-gradient(90deg, red 50%, blue 50%) crea un elemento mitad rojo mitad azul sin transición. Esto permite crear patrones geométricos con CSS puro: barras diagonales, cuadros de ajedrez, o bandas de colores de marca. Por ejemplo, un fondo de rayas diagonales: background: repeating-linear-gradient(45deg, #0011ff 0px, #0011ff 10px, #ffffff 10px, #ffffff 20px). WikiPlus genera el gradiente base; la función repeating-linear-gradient se añade manualmente para crear el patrón repetitivo.
Preguntas frecuentes
- ¿El conic-gradient funciona en todos los navegadores?
- conic-gradient tiene soporte del 96 % a nivel global según Can I Use (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). IE no lo soporta, pero IE tiene cuota de uso mínima. Para proyectos donde el soporte de IE es irrelevante, conic-gradient puede usarse sin fallback. Para mayor seguridad, añade un color sólido como fallback: background: #FF6B6B; background: conic-gradient(...).
- ¿Los mesh gradients impactan el rendimiento?
- Los mesh gradients con filter: blur() tienen un coste de GPU moderado porque el blur requiere procesamiento de compositing. Para elementos estáticos en posición fija o absolute, el navegador puede cachear el resultado. Para elementos animados o que requieren redibujado frecuente, considera pregenerar el gradiente como imagen PNG o SVG y usarlo como background-image para eliminar el coste de recálculo.
- ¿Puedo exportar un gradiente CSS como imagen para usarlo en Figma?
- No directamente desde WikiPlus. Para convertir un gradiente CSS a imagen, abre las herramientas de desarrollador del navegador (F12), selecciona el elemento con el gradiente aplicado, haz una captura de pantalla del área del elemento, o usa la función de captura de nodo del inspector. En Figma, puedes replicar cualquier gradiente CSS con el panel de Fill usando las mismas paradas de color y ángulo.