Generador de degradados CSS
Elige un tipo de degradado, ajusta el ángulo y los puntos de color, y copia CSS listo para producción o un valor arbitrario de Tailwind. La vista previa se actualiza mientras editas.
Gratis Se ejecuta en local Sin registro
Ajustes
Puntos de color
0%
50%
100%
CSS
linear-gradient(135deg, #7F52FF 0%, #B9A3FF 50%, #0B0B10 100%)
Tailwind
bg-[linear-gradient(135deg,_#7F52FF_0%,_#B9A3FF_50%,_#0B0B10_100%)]
Los colores se escriben en hexadecimal y la vista previa se actualiza al editar.
Cómo se usa
1
Elige el tipo
Cambia entre degradados lineales, radiales y cónicos, y define el ángulo.
2
Ajusta los puntos
Selecciona los colores, mueve sus posiciones y añade hasta cinco puntos.
3
Copia el código
Copia la regla CSS o el valor arbitrario de Tailwind y pégalo en tu proyecto.
Por qué usar esta herramienta
Tres tipos de degradado
Los degradados lineales, radiales y cónicos comparten un editor y una vista previa en vivo.
Salida para Tailwind
Obtén una clase bg-[…] lista para pegar junto al valor CSS plano.
Ajustes y aleatorio
Empieza con un ajuste predefinido o genera una paleta aleatoria cuando necesites ideas.
Preguntas frecuentes
¿Qué navegadores admiten degradados cónicos?
Todas las versiones actuales de Chrome, Edge, Firefox y Safari admiten conic-gradient. Los navegadores antiguos no muestran fondo, así que mantén un color sólido detrás.
¿Cómo uso el valor de Tailwind?
Pega la clase bg-[…] generada en tu HTML o JSX. Los espacios se sustituyen por guiones bajos, que es como Tailwind escapa los valores arbitrarios.
¿Puedo usar colores transparentes?
Sí, el selector de color escribe valores hex de ocho dígitos con canal alfa, que CSS y Tailwind aceptan.
¿Por qué el ángulo está desactivado en los degradados radiales?
Un degradado radial se expande desde un punto central, así que no hay dirección que rotar. El ángulo sigue aplicándose a los degradados lineales y cónicos.
¿Se sube algo?
No. El degradado se genera en tu navegador y nunca se envía a un servidor.
Herramientas relacionadas
Color y diseño Conversor de colores Convierte colores entre HEX, RGB, HSL y HSV, elige uno con la rueda de color y copia valores listos para CSS y herramientas de diseño. Color y diseño Comprobador de contraste Comprueba el contraste entre el texto y el fondo y descubre si cumple WCAG AA y AAA para texto normal y texto grande. Herramientas de imagen Conversor de formatos de imagen Convierte imágenes PNG, JPG y WebP en tu navegador. Elige el formato y la calidad de salida, conserva la transparencia cuando sea posible y descarga. Herramientas de desarrollo Codificador y decodificador Base64 Convierte texto a Base64 o vuelve a texto legible. Compatible con UTF-8 y con la variante URL-safe, y todo se ejecuta en tu navegador, sin subir nada. Herramientas de texto Conversor de mayúsculas y minúsculas Cambia texto entre MAYÚSCULAS, minúsculas, Tipo título, tipo frase, camelCase, PascalCase, snake_case y kebab-case al instante. Conversores Calculadora de fechas Calcula la diferencia entre dos fechas, suma o resta días, meses y años, y obtén una edad exacta. Todo se ejecuta en tu navegador.
Última actualización: