Generador de Gradientes CSS
Color
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
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.