Generador de Gradientes CSS
Diseña gradientes CSS lineales o radiales de forma visual: elige el tipo, ajusta el ángulo o la forma, añade tantas paradas de color como quieras y mira una vista previa en vivo. Copia el resultado como regla CSS o como clase de valor arbitrario de Tailwind.
Paradas de color
- 0%
- 100%
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]
Cómo usar
- Elige lineal o radial.
- Ajusta el ángulo (lineal) o la forma (radial).
- Edita las paradas de color y mueve los sliders de posición.
- Copia la regla CSS o la clase de Tailwind.
Preguntas frecuentes
- ¿Por qué valores arbitrarios de Tailwind?
- La clase bg-[…] de valor arbitrario te permite añadir un gradiente personalizado a un proyecto Tailwind sin escribir un CSS aparte.
- ¿Cuántas paradas de color puedo añadir?
- Las que quieras — entre tres y cinco suelen verse mejor, pero la herramienta admite cualquier número.
- ¿Puedo guardar un gradiente?
- Tu último diseño se guarda automáticamente en el almacenamiento local del navegador y se restaura la próxima vez.
- ¿Por qué la clase Tailwind lleva guiones bajos?
- Tailwind trata el espacio como separador de clases, así que los valores arbitrarios usan guiones bajos en lugar de espacios.
Herramientas relacionadas
Generador de Conic Gradient
Constructor visual para CSS `conic-gradient()` — rotar ángulo, posición del centro, paradas de color, vista previa de forma. Útil para gráficos circulares, gráficos de anillo, patrones de tablero de ajedrez, ruedas de color.
Exportador de Tokens de Color
Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.
Buscador de nombre de color
Encuentra el nombre de color CSS, Tailwind o XKCD más cercano a cualquier hex/RGB — ordenado por distancia perceptual en el espacio OKLab.
Simulador de modos de mezcla CSS
Aplica los 16 modos de mezcla del W3C (multiply, screen, overlay, soft-light, hue, color, luminosity…) a dos colores y obtén el hex resultante y un snippet CSS mix-blend-mode listo para copiar.
Mezclador de Color
Interpola entre dos colores en RGB, HSL o CIELAB. Mira una franja de gradiente con pasos intermedios.
Interpolación de Color / Pasos de Gradiente
Elige dos colores hex, obtén N pasos intermedios discretos — en sRGB, linear RGB, OKLab o HSL — con easing opcional.