Generador de degradados

Diseña degradados lineales, radiales y cónicos moviendo controles y copia el CSS (o la clase de Tailwind) listo para pegar en tu proyecto.

¿Qué es un degradado en CSS?

Un degradado es una imagen generada por el navegador que pasa suavemente de un color a otro. Por eso se usa con background-image (o el atajo background), no con background-color. Hay tres funciones principales:

• linear-gradient() — los colores avanzan en línea recta, en el ángulo que elijas (90deg = de izquierda a derecha, 180deg = de arriba abajo).
• radial-gradient() — los colores salen desde un punto central hacia afuera, en forma de círculo o elipse.
• conic-gradient() — los colores giran alrededor de un centro, como las manecillas de un reloj (ideal para gráficas de pastel o ruedas de color).

Cada color es una parada (color stop): un color más la posición donde aparece (#7c3aed 0%). Puedes poner todas las paradas que quieras.

.hero {
  background-color: #7c3aed; /* respaldo */
  background-image: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}

Generador

Elige un preset o arma el tuyo: cambia el tipo, el ángulo y las paradas de color. Haz clic en una parada (en la barra o en la lista) para editar su color, posición y opacidad.

Generador de degradados

Ángulodeg Repetir (repeating-…)

Paradas de color

#7c3aed · 0%

#06b6d4 · 100%

Color de la paradaPosición%Opacidad

.degradado {
  /* Color de respaldo para navegadores muy antiguos */
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}

Consejos de uso

• Pon siempre un background-color de respaldo con el color dominante. Si la imagen no carga o el texto queda encima, sigue habiendo contraste.
• Texto sobre degradados: revisa el contraste en la zona más clara y en la más oscura. Si no alcanza, agrega una capa semitransparente: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(foto.jpg).
• Dos paradas en la misma posición crean un corte duro, sin transición: linear-gradient(90deg, red 50%, blue 50%). Así se hacen franjas y banderas.
• Degradados sutiles (dos tonos muy parecidos del mismo color) se ven más profesionales en fondos de secciones que los arcoíris intensos.
• Con Repetir (repeating-linear-gradient) y paradas cercanas obtienes patrones de rayas sin imágenes.
• Los colores semitransparentes (opacidad < 1) permiten apilar degradados sobre fotos o sobre otros degradados separándolos con comas.

Buena práctica

Guarda tus degradados de marca en variables CSS para reutilizarlos en todo el sitio:

:root {
  --degradado-marca: linear-gradient(135deg, #7c3aed, #06b6d4);
}

.boton { background-image: var(--degradado-marca); }

Error común

background-color: linear-gradient(...) no funciona: un degradado es una imagen, así que va en background-image o background.