Generador de gradientes CSS

Linear, radial y cónico: cuándo usar cada uno

CSS soporta tres tipos de gradiente nativos. Cada uno resuelve un problema visual distinto, y mezclarlos sin criterio es la forma más rápida de hacer una interfaz que se sienta cargada.

• linear-gradient: el más común. Ideal para hero sections, botones con dimensión y headers que necesitan una transición sutil entre dos zonas. Se define con un ángulo (135deg) o una palabra clave (to right).
• radial-gradient: emula un foco de luz. Útil para spotlight effects, fondos centrados en un CTA, mocks de pantallas con vignette. Permite forma (circle o ellipse) y posición (at top left).
• conic-gradient: rota alrededor de un punto. Es la herramienta correcta para construir gráficos de torta, ruletas, color pickers y efectos tipo "loading ring" sin SVG.

Stops: el detalle que separa un gradiente bueno de uno excelente

Por defecto, dos colores se mezclan en un 50/50 lineal. Pero podés controlar exactamente dónde transiciona cada color con stops:

linear-gradient(135deg, #059669 0%, #0ea5e9 60%, #a855f7 100%)

Mover el segundo color al 60% en lugar del 50% hace que el primer color domine más la composición. Para crear divisiones duras (sin blending), poné dos stops en la misma posición: #059669 50%, #0ea5e9 50%.

Gradientes mesh: la nueva moda

Los gradientes "mesh" (estilo Stripe, Vercel) no son una propiedad CSS distinta: son varios radial-gradient apilados con transparencia. Tres o cuatro radiales con colores distintos, posicionados en esquinas opuestas, generan ese efecto orgánico que se volvió omnipresente en landings tech.

Cuándo NO usar gradientes

• Detrás de texto largo. Reduce contraste y hace la lectura cansadora.
• En botones secundarios. Reservá esa carga visual para el CTA principal.
• Animados a 60fps en mobile de gama baja. background-position animado puede tirar el frame rate.
• En fondos de cards densas. Si ya tenés sombras, bordes y contenido, el gradiente sobra.

Performance y accesibilidad

Un gradiente CSS pesa cero kilobytes y se renderiza en GPU. Es siempre mejor que un PNG/JPG. Pero pensá en accesibilidad: si tu gradiente va detrás de texto, garantizá un ratio de contraste mínimo de 4.5:1 contra el color más claro y contra el más oscuro. Si dudás, usá un overlay sólido con rgba() entre el gradiente y el texto.

Copiar y exportar

El CSS generado va directo a tu archivo de estilos como background: ...;. Si usás Tailwind, podés meterlo como className="bg-[linear-gradient(...)]". Si vas a aplicar el mismo gradiente en muchos componentes, definilo como variable: --brand-grad: linear-gradient(...);.