Generador de gradientes

1. 01Elige un tipo de gradienteLineal es una transición recta a lo largo de un ángulo. Radial es una transición desde el centro hacia afuera en forma circular. Lineal funciona bien para la mayoría de los fondos; radial es ideal para destacados redondos, botones de acción o fondos de cabecera.
2. 02Ajusta el ángulo (lineal)El ángulo controla la dirección de la transición. 0° = de abajo hacia arriba. 90° = de izquierda a derecha. 180° = de arriba hacia abajo. 135° (el valor predeterminado) va desde la esquina superior izquierda hasta la inferior derecha y se ve suave y natural en la mayoría de los gradientes.
3. 03Crea los puntos de colorCada punto de color se define con un color (hexadecimal, como #1ed4c5) y una posición en porcentaje (de 0 a 100). Agrega hasta 5 puntos con "+ Agregar punto". Por ejemplo: un primer punto en 0% con el color A y un segundo punto en 100% con el color B.
4. 04Copia el códigoAl hacer clic en "Copiar CSS" el código se copia al portapapeles. Pégalo en el archivo CSS de tu sitio, en un estilo en línea o en una plantilla de diseño. También hay disponible un valor arbitrario de Tailwind para quienes trabajan con Tailwind v4.

• Fondo de cabecera para una landing pageUn gradiente sutil detrás del título principal de una landing page añade profundidad sin afectar la legibilidad. Usa puntos de bajo contraste dentro de la misma familia de tonos.
• Botón de llamada a la acción llamativoUn gradiente en un botón principal (por ejemplo, de azul a violeta) llama más la atención que un color plano. Mantenlo en dos puntos y un ángulo de 90° a 135° para un efecto dinámico.
• Fondo envolvente para una sección de emailAlgunas plantillas de email admiten gradientes CSS. Prueba la compatibilidad en el cliente de correo específico antes de un envío masivo; algunos clientes solo muestran el primer color.
• Fondo de sección en un sitio webUn gradiente vertical suave (180°) entre dos tonos cercanos separa secciones de contenido en una página larga sin líneas divisorias marcadas.
• Paleta de marca rápidaColoca los colores principales de tu marca como puntos en un gradiente, captura la vista previa y guárdala como muestra para mostrar a un cliente antes de una elección final.

• Gradiente lineal simple de dos puntos`linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)`. Azul-violeta suave a 135°. Dos puntos que funcionan bien para un fondo de cabecera.
• Gradiente de tres puntos`linear-gradient(100deg, #ff6a3d 0%, #ff9a5a 55%, #ffd166 100%)`. Atardecer: naranja, naranja claro, amarillo. Un punto en 55% adelanta el tono intermedio.
• Gradiente radial para un efecto de brillo`radial-gradient(circle, #1ed4c5 0%, #0a3a3a 100%)`. Un centro turquesa que se apaga hacia el oscuro en los bordes. Ideal para el fondo de un botón o una tarjeta destacada.
• Gradiente sutil de gris a blanco`linear-gradient(180deg, #f5f5f7 0%, #d8d8de 100%)`. Una transición vertical fina que añade profundidad a un fondo neutro. Funciona bien en tarjetas de producto o en el fondo de una tabla.
• Gradiente oscuro premium`linear-gradient(135deg, #0f172a 0%, #1f2a44 100%)`. Se ve serio y funciona bien en sitios de software, finanzas o páginas de precios premium.

Un gradiente CSS es un valor de fondo que genera una transición suave entre varios colores directamente en el navegador. No hace falta ninguna imagen. El navegador dibuja la transición a partir de una definición de texto, lo que da fondos nítidos en cualquier tamaño de pantalla, sin peso de archivo y con edición fácil mediante variables CSS. Los dos tipos habituales son linear-gradient (una transición recta a lo largo de un ángulo) y radial-gradient (una transición desde el centro hacia afuera).

Lineal funciona bien en fondos de página, fondos de sección, botones y fondos de cabecera. Es más fácil de planificar y encaja bien en un diseño. Radial es ideal para destacados redondos, un efecto de brillo alrededor de un punto, fondos de logotipo o fondos de botones redondos. No hay una regla fija; prueba ambos y observa cuál transmite mejor el mensaje.

El ángulo en un gradiente lineal se mide respecto al eje vertical. 0° = el primer color se ubica abajo y la transición avanza hacia arriba. El ángulo aumenta en el sentido de las agujas del reloj: 90° = de izquierda a derecha; 180° = de arriba hacia abajo; 270° = de derecha a izquierda. Si el eje izquierda/derecha se ve invertido en un diseño de derecha a izquierda, simplemente suma o resta 180°.

Todos los navegadores modernos son compatibles con linear-gradient y radial-gradient sin prefijo. El soporte en email varía: Gmail muestra la mayoría de los gradientes, mientras que Outlook a veces muestra solo el primer color. Prueba siempre en el cliente de correo específico antes de un envío masivo.

No verifica el contraste de color con el texto. No determina el cumplimiento de las WCAG. No exporta a una imagen PNG/JPG. No ofrece curvas de animación. Para eso usa herramientas dedicadas. Como ayuda visual para mostrar un gradiente, esta herramienta cumple su función.

Todo ocurre en tu navegador. Los colores, el ángulo, los puntos, el tipo de gradiente y el código CSS generado no se suben, no se guardan en localStorage ni en IndexedDB, y no se envían a analítica. Una analítica operativa mínima mide solo el uso general: una vista de página, un primer uso exitoso de la herramienta y una copia. Nunca se envía ningún valor, color o código CSS.

¿Qué es un gradiente CSS?

Un valor de fondo que genera una transición suave entre colores directamente en el navegador, sin necesidad de una imagen. Los dos tipos habituales son linear-gradient y radial-gradient.

¿Cómo agrego el código a mi sitio?

Copia la línea `background:` y pégala en el CSS del elemento correspondiente, o en un estilo en línea. También puedes usar la versión más larga `background-image:` para superponerla con una imagen de fondo adicional.

¿Cuántos puntos de color admite la herramienta?

Entre 2 y 5 puntos. Con dos puntos suele bastar para la mayoría de los gradientes; agrega más solo cuando haya una razón para hacerlo.

¿Cuál es la diferencia entre lineal y radial?

Lineal = una transición recta a lo largo de un ángulo determinado, ideal para fondos de página. Radial = una transición desde el centro hacia afuera en forma circular, ideal para destacados redondos.

¿El código funciona en plantillas de email?

Depende del cliente de correo. Gmail muestra la mayoría de los gradientes, mientras que Outlook a veces muestra solo el primer color. Prueba en el cliente de correo específico antes de un envío masivo.

¿La herramienta comprueba el contraste de color y la accesibilidad?

No. La herramienta muestra el gradiente y genera el CSS. No verifica el contraste con el texto ni determina el cumplimiento de las WCAG. Usa una herramienta de contraste dedicada para eso.

¿La herramienta envía mis colores a algún sitio?

No. Todo el procesamiento ocurre en tu navegador. Ningún color, punto o código que crees se sube, se guarda ni se envía a analítica.

¿Es gratuita la herramienta?

Sí. La herramienta es gratuita, sin registro, sin cuenta y sin un límite de uso razonable.