Generador de Gradientes CSS: Lineal y Radial
Generador de gradientes CSS con editor visual para gradientes lineales, radiales y cónicos. Agrega paradas de color, ajusta ángulos, copia CSS.
¿Qué es el Generador de Gradientes?
El Generador de Gradientes es un editor visual basado en navegador para crear gradientes CSS — lineal, radial y cónico — con múltiples paradas de color y parámetros ajustables. Genera CSS listo para producción que puedes copiar en cualquier hoja de estilos. La herramienta muestra una vista previa en tiempo real del gradiente con cada cambio, eliminando el ciclo de prueba y error entre el editor y las herramientas de desarrollo del navegador. Los diseñadores lo usan para prototipar fondos con degradados y generar CSS preciso; los desarrolladores lo usan para exportar archivos SVG con gradientes para recursos escalables.
Funciones principales
- Gradientes lineales, radiales y cónicos — Tres tipos distintos seleccionables con un solo clic. Cada tipo genera la función CSS correcta:
linear-gradient(),radial-gradient()oconic-gradient(). - Múltiples paradas de color con posiciones — Agrega tantas paradas como necesites. Cada parada tiene un selector de color, una entrada hexadecimal y un control deslizante de posición del 0 % al 100 %. El mínimo son dos paradas; la herramienta muestra un mensaje de error si intentas eliminar las últimas dos.
- Ángulo de gradiente ajustable — Un control deslizante regula el ángulo de 0° a 360° para tipos de gradiente lineal y cónico. El ángulo se incorpora directamente en la salida CSS.
- Generación de CSS en tiempo real — La tarjeta de salida CSS se actualiza de inmediato con cada cambio. El formato de salida es
background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%);— listo para pegar. - Vista previa instantánea del gradiente — Un panel de vista previa de 256px de altura en la parte superior de la herramienta renderiza el gradiente usando el valor CSS activo como estilo en línea.
- Copiar CSS con un clic — El botón Copiar CSS copia la declaración
background: ...;completa al portapapeles y registra la entrada en tu historial. - Soporte para gradientes repetitivos — No se muestra actualmente como un control separado, pero la salida CSS puede editarse manualmente para reemplazar
linear-gradientporrepeating-linear-gradientsi es necesario. - Salida CSS compatible con navegadores — El CSS generado usa sintaxis estándar sin prefijos compatible con todos los navegadores modernos.
Cómo usar el Generador de Gradientes
Paso 1: Elegir un tipo de gradiente
Navega al Próximamente: Generador de Gradientes. La herramienta se abre con un gradiente lineal predeterminado de #8E2DE2 (violeta) al 0 % a #33FFDD (turquesa brillante) al 100 %, renderizado a 90 grados.
En la tarjeta Tipo de gradiente, haz clic en uno de los tres botones: Lineal, Radial o Cónico. La vista previa se actualiza de inmediato. Para los tipos lineal y cónico, aparece un control deslizante de ángulo debajo del selector de tipo.
Paso 2: Establecer el ángulo (solo lineal y cónico)
Arrastra el control deslizante de Ángulo entre 0 y 360 grados. El valor actual del ángulo se muestra como etiqueta (p. ej., Ángulo: 135°). 0° fluye de arriba a abajo, 90° de izquierda a derecha, 180° de abajo a arriba y 270° de derecha a izquierda. La vista previa se actualiza con cada movimiento del control deslizante.
Para gradientes radiales, el control de ángulo está oculto porque radial-gradient(circle, ...) no usa un parámetro de ángulo.
Paso 3: Configurar las paradas de color
La tarjeta Paradas de color lista cada parada como una fila que contiene:
- Una entrada de color nativa (cuadrado de color) — haz clic para abrir el selector de color del navegador
- Una entrada de texto hexadecimal que muestra el valor de color actual
- Un control deslizante de posición del 0 al 100 %
- Una etiqueta de porcentaje de posición (p. ej.,
45 %) - Un botón de eliminar (icono de papelera)
Tanto la entrada de color como la entrada hexadecimal actualizan la misma parada. Cambiar cualquiera de las dos actualiza la vista previa de inmediato.
Haz clic en Agregar parada para insertar una nueva parada de color en una posición aleatoria con color blanco predeterminado. Edita el color y la posición para colocarla donde la necesites.
Paso 4: Eliminar una parada de color
Haz clic en el icono de papelera en cualquier fila de parada para eliminarla. Si solo quedan dos paradas, hacer clic en Eliminar muestra el mensaje de error "Se requieren mínimo 2 paradas de color" como notificación y mantiene ambas paradas intactas.
Paso 5: Copiar la salida CSS
La tarjeta Salida CSS muestra la declaración completa:
background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);Haz clic en Copiar CSS para copiar esta cadena al portapapeles. Una notificación de éxito confirma la copia. La entrada también se registra en el panel de historial (para cuentas de seguidores) con el tipo de gradiente, el ángulo y el valor CSS.
Paso 6: Exportar como SVG (función para seguidores)
Haz clic en el botón SVG (con icono de descarga) para exportar el gradiente como archivo SVG. Para gradientes lineales, el SVG usa un elemento <linearGradient> con un atributo gradientTransform="rotate(ángulo, 0.5, 0.5)". Para gradientes radiales, usa <radialGradient>. El archivo se descarga como gradient.svg. Esta es una función premium para seguidores.
Paso 7: Aleatorizar o restablecer
Haz clic en Aleatorizar (icono de flecha circular) para generar un nuevo gradiente con dos colores aleatorios y un ángulo aleatorio. Haz clic en Limpiar para restablecer el gradiente al gradiente lineal violeta-turquesa predeterminado a 90°.
Ejemplos prácticos
Fondo degradado para sección hero
Quieres un gradiente diagonal a 135° de #667EEA (azul-violeta medio) a #764BA2 (morado oscuro) para el hero de una página de destino. Establece el tipo en Lineal, arrastra el control de ángulo a 135, cambia la parada 1 a #667EEA al 0 % y la parada 2 a #764BA2 al 100 %. Haz clic en Copiar CSS y pega:
.hero {
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}Efecto de foco radial
Quieres un gradiente radial que parezca iluminar el centro de una tarjeta. Establece el tipo en Radial. Cambia la parada 1 a #FFFFFF al 0 %, agrega una tercera parada al 50 % con #F1F5F9 y establece la parada 2 (ahora parada 3) en #CBD5E1 al 100 %. La salida:
background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);Úsalo como efecto de profundidad sutil en superficies de tarjetas blancas.
Vista previa de rueda de colores cónica
Establece el tipo en Cónico y el ángulo en 0°. Agrega seis paradas uniformemente espaciadas: rojo (#FF0000) al 0 %, amarillo (#FFFF00) al 17 %, verde (#00FF00) al 33 %, cian (#00FFFF) al 50 %, azul (#0000FF) al 67 % y magenta (#FF00FF) al 83 %. La última parada cierra naturalmente de vuelta al rojo. Exporta como SVG para usar la rueda en un diagrama de teoría del color.
Consejos y buenas prácticas
Las paradas de color se ordenan por posición antes de generar el CSS. Puedes agregar paradas en cualquier orden — la herramienta siempre las ordena de forma ascendente antes de escribir la salida. Esto significa que arrastrar una parada del 0 % más allá de una del 50 % en el control deslizante reordenará correctamente el CSS.
Usa el botón Aleatorizar para puntos de partida creativos. El aleatorio genera dos colores hexadecimales aleatorios y un ángulo aleatorio. Haz clic repetidamente hasta encontrar una paleta que valga la pena refinar y luego ajusta los colores manualmente.
Pegar un gradiente existente para hacer ingeniería inversa. La herramienta aún no admite pegar directamente una cadena de gradiente CSS. Sin embargo, puedes extraer los valores de las paradas de un gradiente existente e ingresarlos manualmente.
Las URL compartibles codifican todos los parámetros del gradiente. El tipo de gradiente, el ángulo y las paradas de color (como cadena compacta color:posición) se serializan en la URL de la página. Copia la URL para compartir tu configuración exacta de gradiente con un compañero.
El exportar SVG usa un lienzo de 400×200px. El gradient.svg exportado tiene width="400" height="200" y un elemento <rect> que rellena todo el lienzo con el gradiente. Escálalo libremente ya que SVG es independiente de la resolución.
El mínimo de dos paradas se aplica con un mensaje de notificación. Si intentas eliminar una parada cuando solo quedan dos, la notificación de error dice "Se requieren mínimo 2 paradas de color" — el gradiente necesita al menos dos paradas para ser CSS válido.
Problemas comunes y solución de problemas
La salida CSS dice background: ; (gradiente vacío). Esto no debería ocurrir durante el uso normal. Si el array de paradas de color está vacío (posible solo por corrupción del estado de la URL), la función generateCss devuelve una cadena vacía. Limpia la herramienta con el botón Restablecer o recarga la página para restaurar el estado predeterminado.
La entrada hexadecimal de la parada de color muestra el color incorrecto después de escribir. La entrada hexadecimal está directamente vinculada al valor de color de la parada. Si escribes un hexadecimal inválido (p. ej., #ZZZZZZ), la entrada del selector de color no se actualizará y puede mostrar el color válido anterior. Corrige el hexadecimal a un valor válido de 6 dígitos.
El control deslizante de posición es difícil de posicionar con precisión. El control acepta valores en incrementos del 1 %. Para un posicionamiento preciso, escribe el porcentaje directamente — sin embargo, la interfaz actual usa solo un control deslizante. Usa números redondos cercanos y verifica en la salida CSS.
El gradiente radial parece descentrado. El gradiente radial generado usa radial-gradient(circle, ...) que se centra en 50 % 50 % de forma predeterminada. Agregar circle at X% Y% aún no está disponible en la interfaz. Edita manualmente el CSS copiado en tu hoja de estilos para reposicionar el centro.
El exportar SVG muestra solo lineal o radial. La función de exportación SVG maneja el gradiente lineal como <linearGradient> y todos los demás tipos (incluido el cónico) como <radialGradient>. Los gradientes cónicos no tienen un equivalente SVG, por lo que recurren a radial en la exportación SVG.
La restauración del historial solo restaura parcialmente el estado. La función de restauración del historial analiza el tipo de gradiente y el ángulo del texto del historial almacenado. No restaura las paradas de color desde el historial (las paradas se conservan en el estado de la URL compartible). Usa la URL de compartir para la restauración completa del estado.
Privacidad y seguridad
El Generador de Gradientes se ejecuta completamente en tu navegador. La generación de CSS, la gestión de paradas de color y la lógica de exportación SVG son todo JavaScript puro. No se envían configuraciones de gradiente, valores de color ni datos de uso a ningún servidor externo. La exportación SVG usa downloadText para escribir un archivo local — no se produce ninguna carga. La herramienta funciona completamente sin conexión después de que se carga la página y es segura para usar con recursos de diseño propietarios o no publicados.
Preguntas frecuentes
¿El Generador de Gradientes es gratuito?
Sí. Todas las funciones principales — creación de gradientes lineales, radiales y cónicos, múltiples paradas de color, control de ángulo, copia de CSS y aleatorización — son gratuitas sin necesidad de cuenta. El botón de exportación SVG es una función premium para seguidores que requiere una suscripción de seguidor en Ko-fi.
¿El Generador de Gradientes funciona sin conexión?
Sí. Una vez que se carga la página, toda la generación de gradientes, el renderizado de la vista previa y la salida CSS funcionan sin acceso a internet. Las únicas funciones que dependen de internet son la carga inicial de la página y la URL compartible, que codifica el estado en la propia URL (no se necesita llamada al servidor para leer el estado).
¿Están seguros mis datos con el Generador de Gradientes?
Sí. No se transmiten parámetros de gradiente ni valores de color a ningún servidor. La herramienta no tiene backend para la generación de gradientes. Tus diseños permanecen completamente en tu dispositivo. La URL compartible codifica el estado en la propia cadena de URL — ningún servidor lo almacena.
¿Qué tipos de gradientes CSS admite la herramienta?
La herramienta admite tres tipos de gradientes CSS: linear-gradient(), radial-gradient() y conic-gradient(). La salida CSS usa sintaxis estándar sin prefijos. Para compatibilidad con navegadores, linear-gradient y radial-gradient funcionan en todos los navegadores modernos; conic-gradient requiere Chrome 69+, Safari 12.1+ y Firefox 83+.
¿Cómo creo un gradiente con múltiples paradas?
Haz clic en Agregar parada para insertar paradas de color adicionales. Cada nueva parada aparece en una posición aleatoria con blanco como color predeterminado. Haz clic en el cuadrado de color o escribe un valor hexadecimal para establecer el color, luego arrastra el control deslizante de posición para colocarlo. No hay límite superior en el número de paradas.
¿Puedo eliminar una parada de color?
Sí. Haz clic en el icono de papelera en cualquier fila de parada. Si solo quedan dos paradas, la herramienta evita la eliminación y muestra una notificación: "Se requieren mínimo 2 paradas de color." Un gradiente CSS válido necesita al menos dos paradas de color.
¿Qué contiene el archivo SVG exportado?
La exportación SVG crea un archivo de 400×200px con un bloque <defs> que contiene un <linearGradient> (para tipo lineal) o <radialGradient> (para tipos radial y cónico), y un elemento <rect> que rellena todo el lienzo con ese gradiente. El archivo se llama gradient.svg y se descarga automáticamente.
¿Puedo usar el CSS generado en Tailwind CSS?
Sí. Pega el valor linear-gradient(...) (sin el prefijo background:) en tu configuración de Tailwind como imagen de fondo personalizada:
backgroundImage: {
'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}Luego úsalo como bg-brand-gradient en tu HTML.
¿Admite la herramienta paradas de color transparentes?
Las entradas de color solo aceptan valores hexadecimales opacos (6 dígitos). Para crear un gradiente con transparencia, copia la salida CSS y modifica manualmente los colores de las paradas para usar notación rgba() en tu hoja de estilos, por ejemplo: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).
¿Cómo comparto un gradiente con alguien?
Copia la URL de la barra de direcciones de tu navegador después de configurar tu gradiente. La URL codifica el tipo de gradiente, el ángulo y todos los valores de las paradas de color. Abrir esa URL en otro dispositivo carga exactamente el mismo gradiente. También puedes usar los botones de compartir en la parte inferior de la página para publicar en Twitter, LinkedIn, Reddit o copiar el enlace directamente.
Herramientas relacionadas
- Próximamente: UI Gradients — Explora una biblioteca seleccionada de gradientes con nombre y copia sus valores CSS directamente.
- Color Picker — Usa el EyeDropper o las entradas de formato para encontrar colores hexadecimales exactos antes de agregarlos como paradas de gradiente.
- Próximamente: Color Blender — Genera colores intermedios suaves entre dos valores, útil para planificar manualmente gradientes de múltiples paradas.
- Próximamente: Palette Generator — Genera paletas de colores armoniosas para usar como fuentes de paradas de gradiente.
Prueba el Generador de Gradientes ahora: Próximamente: Glyph Widgets Generador de Gradientes