CSS Gradient Generator

Crea gradientes CSS lineales y radiales de forma visual con vista previa en tiempo real.

{{ stop.position }}%
{{ cssOutput }}

¿Qué es un gradiente CSS?

Los gradientes CSS crean transiciones de color suaves entre dos o más colores. Se utilizan comúnmente como fondos para botones, encabezados, secciones hero y elementos decorativos. Usa linear-gradient() para crear transiciones en línea recta en cualquier ángulo, o radial-gradient() para transiciones circulares o elípticas.

Linear Gradient vs. Radial Gradient

Linear Gradient se extiende a lo largo de un eje recto: de arriba a abajo, de izquierda a derecha o en cualquier ángulo. Radial Gradient irradia hacia afuera desde un punto central, ya sea como círculo o elipse. Ambos tipos admiten cualquier número de paradas de color con posiciones ajustables.

Consejos para gradientes bonitos

  • Usa un máximo de 2–3 colores para un aspecto limpio.
  • Tonos similares (p. ej., azul → teal) crean un efecto armonioso.
  • No coloques las paradas de color demasiado cerca entre sí para evitar bordes duros.
  • Prueba el gradiente en diferentes tamaños de pantalla.