Generador de Gradientes CSS

Cómo usar el generador de gradientes CSS

1. Elige un tipo de gradiente (Lineal, Radial o Cónico) arriba.
2. Para gradientes Lineales y Cónicos, fija el ángulo en grados. Para Radial, elige Círculo o Elipse.
3. Haz clic en cada muestra de color para elegir un color, y ajusta su Posición % y Opacidad %. Usa + Añadir parada de color para añadir más colores, o el botón ✕ para eliminar uno (mínimo dos).
4. Observa cómo la vista previa en vivo se actualiza al instante mientras editas.
5. Pulsa Copiar CSS para copiar una declaración background: ...; lista para pegar, o fija un ancho/alto y pulsa Descargar como PNG para guardar el gradiente como imagen.

Todo ocurre localmente en tu navegador, sin subir nada, sin cuenta, sin ida y vuelta al servidor.

Construir gradientes visualmente en lugar de adivinar la sintaxis

Los gradientes CSS son potentes pero delicados de escribir a mano: acertar con la dirección del ángulo, recordar la sintaxis de linear-gradient() frente a radial-gradient() frente a conic-gradient(), y conseguir que los porcentajes de las paradas de color encajen como te los imaginas suele significar varias rondas de prueba y error en las herramientas de desarrollo. Esta herramienta le da la vuelta a eso, construyes el gradiente ajustando controles reales y viendo una vista previa en vivo, y solo ves el CSS generado una vez que ya se ve bien.

• Los gradientes lineales mezclan color en línea recta en el ángulo que elijas. 0deg apunta “hacia arriba”, y el ángulo aumenta en el sentido de las agujas del reloj desde ahí: 90deg va de izquierda a derecha, 180deg va de arriba a abajo, y 45deg va desde la esquina inferior izquierda hasta la superior derecha.
• Los gradientes radiales mezclan color hacia afuera desde un punto central. Elige Círculo para un gradiente perfectamente redondo, o Elipse para estirarlo según la propia proporción del cuadro (útil para banners anchos o tarjetas altas).
• Los gradientes cónicos barren el color alrededor de un punto central como una rueda de color, empezando desde el ángulo que fijes, geniales para efectos de gráfico circular, ruedas de selector de color o fondos con barrido sutil.

Paradas multicolor y transparencia

Cada gradiente admite tantas paradas de color como necesites. Añade un tercer o cuarto color para crear mezclas multicolor suaves, o pon dos paradas adyacentes en la misma posición para crear una banda de color dura y de borde definido en lugar de una transición suave. Combina eso con el control deslizante de opacidad por parada para desvanecer un gradiente hasta la transparencia total, una técnica habitual para superposiciones de fotos, gradientes de “velo” sobre imágenes principales, o para mezclar suavemente una sección de color con el fondo de la página detrás.

Exportar como imagen PNG

La mayoría de las veces querrás el CSS en bruto, pero a veces necesitas el gradiente como un archivo de imagen real, para una maqueta de diseño, una foto de fondo de marcador de posición, un banner social, o cualquier herramienta/plataforma que acepte subir imágenes pero no CSS en vivo. El botón Descargar como PNG dibuja tu gradiente exacto (mismos colores, mismo ángulo, mismas paradas) en un canvas con el ancho y alto que fijes, enteramente en tu navegador, y lo descarga como un archivo .png real.

Usos habituales

• Fondos de secciones y de la parte principal (hero) de un sitio web.
• Gradientes de estado hover para botones y tarjetas.
• Fondos de iconos de app y favicons.
• Fondos de banners y miniaturas para redes sociales (mediante la exportación a PNG).
• Escalas de color para visualización de datos y selectores estilo “rueda de color” (gradientes cónicos).
• Gradientes de “velo” para superponer sobre fotos y que el texto siga siendo legible.