Softonic

Generador de Gradientes CSS

Paso 1 / 3
Tipo
Siguiente

Los fondos de UI modernos rara vez utilizan un color plano: las secciones hero, botones y tarjetas casi todos usan un gradiente CSS. Este generador te permite elegir entre lineal o radial, agregar tantas paradas de color como desees, establecer el ángulo (para lineales) o la forma (para radiales), y copiar un valor limpio background: linear-gradient(…) listo para pegar en tu hoja de estilos.

Cómo construir un gradiente CSS

  1. 1

    Elige el tipo de gradiente

    Lineal (dirección por ángulo) o radial (círculo/elipse).

  2. 2

    Establece el ángulo o la forma

    Lineal: 0–360°. Radial: círculo o elipse.

  3. 3

    Agrega paradas de color

    Cada parada es un color más una posición (0–100%). Los gradientes de dos paradas son la base; tres paradas o más dan transiciones más suaves.

  4. 4

    Copia el CSS

    La salida es un único valor de propiedad `background` que puedes pegar en cualquier archivo CSS.

Hoja de trucos de sintaxis

/* Lineal */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radial (círculo) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Múltiples paradas */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Ángulos que realmente coinciden con la intuición

Los ángulos de gradiente CSS difieren de la trigonometría: 0deg apunta arriba (norte), 90deg apunta a la derecha (este), 180deg hacia abajo, 270deg a la izquierda.

Dirección Ángulo
De arriba a abajo 180deg
De abajo a arriba 0deg
De izquierda a derecha 90deg
De arriba-izquierda a abajo-derecha 135deg

Evitando tonos intermedios turbios

Los gradientes lineales entre colores complementarios (por ejemplo, azul → naranja) pasan por una banda gris alrededor del 50% donde la mezcla se siente “muerta”. Soluciona esto:

  • Agregando una parada intermedia en un matiz relacionado (azul → púrpura → naranja).
  • Usando interpolación OKLCH (linear-gradient(in oklch, ...)) para mezclas perceptivamente más suaves, soportado en todos los navegadores modernos a partir de 2024.
  • Desplazando ligeramente un extremo en matiz para que el tono intermedio esté en una familia más cálida.

Consejo de rendimiento

Los gradientes son pintados por la GPU y generalmente son baratos. Animar uno (trucos de background-position, desenfoque SVG) aún puede aumentar el costo de pintura, prueba en un teléfono de gama media antes de lanzar.

Preguntas frecuentes

Los gradientes CSS miden el ángulo en sentido horario desde la parte superior, mientras que las matemáticas estándar miden en sentido antihorario desde la derecha. 90deg en CSS apunta a la derecha; en trigonometría eso sería 0°.

La especificación permite cualquier número. Prácticamente, más de 4–5 paradas tiende a sentirse como un arcoíris; dos o tres paradas bien elegidas casi siempre se ven más limpias.

Sí, pégalo como un valor arbitrario: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Para gradientes reutilizables, define una utilidad personalizada en tu configuración de Tailwind.

El editor estándar envía la configuración del gradiente al servidor para renderizar la vista previa. En el flujo guiado, el tipo, ángulo, forma y paradas de color también aparecen en la URL. No introduzcas información sensible; la herramienta no guarda un proyecto de gradiente reutilizable.

Herramientas relacionadas

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Simplificador de Álgebra Booleana

Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de colores aleatorios

Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.

Convertidor de BBCode a HTML

Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes y enlaces.