Generador de Gradientes CSS
Mezcla hasta 8 paradas de color en gradientes lineales, radiales o cónicos: arrastra, afina y copia código listo para producción.
Cómo usar el generador de gradientes
- Elige un tipo de gradiente: lineal, radial o cónico.
- Haz clic en la barra de gradiente para añadir una parada de color; arrastra las paradas a lo largo de la barra para reubicarlas.
- Selecciona una parada para cambiar su color, opacidad y posición exacta (hasta 8 paradas).
- Ajusta el ángulo (lineal/cónico), la forma (radial) o el punto central hasta que se vea bien.
- Copia la declaración background en CSS, o cambia a la pestaña Tailwind para una clase de utilidad.
Acerca de este generador de gradientes
Los gradientes CSS son imágenes generadas por el navegador: linear-gradient pinta a lo largo de una línea recta, radial-gradient irradia desde un punto central y conic-gradient barre alrededor de un centro como una rueda de color. Cada uno acepta dos o más paradas de color con posiciones opcionales. Escribirlos a mano — especialmente con muchas paradas o transparencia rgba — es lento y propenso a errores.
Este generador renderiza tu gradiente en vivo mientras arrastras las paradas por la barra, giras el ángulo o mueves el punto central. Empieza desde uno de los 10 presets curados (atardecer, océano, caramelo, arcoíris…) y hazlo tuyo. La salida es una única declaración background que funciona en todos los navegadores modernos; la pestaña Tailwind envuelve el mismo gradiente en sintaxis de valor arbitrario para flujos utility-first.
FAQ de Gradientes
¿Cuántas paradas de color puedo añadir?
Hasta 8 paradas. Haz clic en cualquier punto de la barra de gradiente para insertar una nueva parada en esa posición; su color se interpola automáticamente desde sus vecinas. Arrastra las paradas para reubicarlas, selecciona una para editar su color y opacidad, y elimínala con el botón «Eliminar parada» (siempre se conservan al menos 2).
¿Cuál es la diferencia entre gradientes lineales, radiales y cónicos?
Los gradientes lineales transicionan colores a lo largo de una línea recta en un ángulo dado. Los radiales se extienden hacia afuera desde un punto central en círculo o elipse. Los cónicos rotan colores alrededor de un punto central (como un gráfico circular o una rueda de color) y admiten un ángulo inicial «from».
¿Cómo hago un gradiente con transparencia?
Selecciona cualquier parada de color y baja su deslizador de opacidad. El generador emite colores rgba() para esa parada, así puedes desvanecer a transparente o mezclar el gradiente sobre una imagen o color de fondo debajo.
¿Cómo invierto la dirección de los colores?
Haz clic en el botón «Invertir»: refleja cada posición de parada (0% se convierte en 100%, etc.), volteando el gradiente sin cambiar el ángulo. También puedes rotar el deslizador de ángulo 180° en gradientes lineales.
¿Puedo usar esto como background-image en lugar de background?
Sí. El valor generado (linear-gradient(...), radial-gradient(...) o conic-gradient(...)) es un