El Generador de Gradientes CSS diseña gradientes lineales, radiales y cónicos de forma visual, para que nunca más tengas que ajustar a mano un valor de background-image. Elige un tipo de gradiente, arrastra el control de ángulo o la posición central, y luego añade, elimina o recolorea tantas paradas de color como necesites con selectores de color nativos y posiciones en porcentaje precisas. Un panel de vista previa en vivo se actualiza al instante mientras editas, y la herramienta genera una declaración `background: ...;` lista para copiar y pegar directo en una hoja de estilos. Está pensada para desarrolladores front-end y diseñadores que quieren prototipar el fondo de un banner, botón o tarjeta sin abrir una aplicación de diseño. Todo se ejecuta localmente en tu navegador, así que los gradientes que crees nunca se suben a ningún lado.
Características
Tipos de gradiente lineal, radial y cónico en una sola herramienta
Paradas de color ilimitadas, cada una con selector de color nativo y posición en porcentaje
Añade o elimina paradas al instante con botones de agregar y quitar
Control deslizante y entrada numérica de ángulo para gradientes lineales y cónicos
Alternador de forma círculo y elipse con posición central arrastrable para gradientes radiales
El panel de vista previa en vivo se actualiza con cada control que editas
Genera una declaración CSS `background: ...;` lista para copiar
Se ejecuta completamente en tu navegador, sin subir nada
Cómo usar Generador de Gradientes CSS
Elige Lineal, Radial o Cónico como tipo de gradiente
Ajusta el ángulo (lineal/cónico) o la forma y posición central (radial)
Añade paradas de color y ajusta el color y la posición en porcentaje de cada una
Copia el CSS de background generado desde el panel de código
Un gradiente lineal de dos paradas, de rojo a azul, con un ángulo de 90 grados.
Errores comunes y solución de problemas
El gradiente se ve plano o muestra un solo color. — Añade al menos dos paradas de color con posiciones distintas — una sola parada, o dos en la misma posición, no producirán una transición visible.
Un gradiente radial se renderiza como un óvalo en vez de un círculo. — Cambia el alternador de forma a Círculo, o déjalo en Elipse si quieres que el gradiente se ajuste a la relación de aspecto del elemento.
El gradiente cónico empieza en el lugar equivocado. — Ajusta el valor del ángulo — los gradientes cónicos rotan su parada inicial en sentido horario desde el ángulo elegido, comenzando en 0deg apuntando hacia arriba.
Los colores se ven bandeados o turbios entre paradas. — Añade una parada de color intermedia cerca del punto de transición en lugar de dejar que el navegador interpole dos tonos muy distintos en un rango amplio.
Preguntas frecuentes
¿Qué es el Generador de Gradientes CSS?
Es una herramienta visual para crear gradientes CSS lineales, radiales y cónicos a partir de paradas de color, con vista previa en vivo y una declaración de background lista para copiar — sin escribir la sintaxis del gradiente a mano.
¿El Generador de Gradientes CSS puede crear gradientes radiales y cónicos, no solo lineales?
Sí. Cambia el control segmentado a Radial para un gradiente circular o elíptico con centro arrastrable, o a Cónico para un gradiente que gira alrededor de un centro desde un ángulo inicial elegido.
¿Cuántas paradas de color puedo añadir en el generador de gradientes?
Las que quieras. Usa el botón Añadir parada para agregar una nueva y el botón de eliminar en cualquier fila para borrarla, siempre que quede al menos una parada.
¿El Generador de Gradientes CSS sube mis colores a algún servidor?
No. El Generador de Gradientes CSS se ejecuta completamente en tu navegador. Los colores, posiciones y gradientes que diseñes nunca salen de tu dispositivo.
¿Qué CSS genera el generador de gradientes?
Una sola declaración de background, como background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, lista para pegar en una hoja de estilos, un atributo style o una plantilla CSS-in-JS.
¿Puedo fijar una posición exacta para el centro de un gradiente radial o cónico?
Sí. Los controles Centro X y Centro Y te permiten mover el origen del gradiente entre 0% y 100% del elemento en cada dirección.