Generador de Gradientes CSS

Diseña hermosos degradados CSS3 visualmente y exporta el código para tu proyecto web o Tailwind.

Color Stops

0%
100%
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
bg-[linear-gradient(90deg,#3b82f60%,#8b5cf6100%)]

¿Qué es un Gradiente CSS?

Los gradientes CSS te permiten mostrar transiciones suaves entre dos o más colores especificados. Antes, esto requería imágenes pesadas, pero ahora con CSS3, puedes crearlos con código, reduciendo el tiempo de carga y mejorando la calidad en pantallas retina.

  • Lineal: Los colores fluyen en una línea recta (arriba a abajo, izquierda a derecha).
  • Radial: Los colores irradian desde un punto central.
// Ejemplo de Código background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);

Características Principales

Editor Visual

Añade y mueve "paradas" de color visualmente. No necesitas adivinar porcentajes.

Exportar a Tailwind

Obtén la clase arbitraria JIT (bg-[...]) lista para pegar en tu HTML.

Multi-Formato

Soporta HEX, RGB y nombres de colores. Próximamente RGBA con transparencia.