Generador de Gradientes CSS Online
Diseña gradientes CSS lineales, radiales y cónicos con paradas de color en vivo y copia el código, directo en tu navegador.
El Generador de Gradientes CSS se ejecuta completamente en tu navegador. Los colores y ajustes de gradiente que diseñas nunca se suben a ArrayKit.
Abrir el Conversor de Colores CSS
Acerca de Generador de Gradientes CSS
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
Ejemplo
Entrada
linear, 90deg, red -> blue
Salida
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
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.
Herramientas relacionadas
Todas las herramientas de ArrayKit