Generador de degradados CSS
Diseña un degradado y copia el código CSS listo para usar.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Crea el degradado perfecto sin escribir una línea de CSS
Los degradados están por todas partes en el diseño moderno: fondos de héroe, botones, tarjetas, textos decorativos. Este generador te permite componerlos visualmente — colores, posiciones, ángulo, tipo — y copiar un código CSS limpio y listo para producción.
-
Elige el tipo
Lineal para una transición direccional, radial para un halo central, cónico para efectos de rueda o tarta.
-
Ajusta colores y posiciones
Cambia cada color con el selector, mueve su posición con el deslizador, añade hasta 6 paradas. El botón Aleatorio sugiere combinaciones armoniosas.
-
Copia el CSS
El código se actualiza en tiempo real. Un clic y está en tu portapapeles.
Tres funciones, tres geometrías
| Función | Geometría | Uso típico |
|---|---|---|
| linear-gradient(ángulo, …) | Línea recta orientada | Fondos, botones, overlays |
| radial-gradient(circle, …) | Círculos concéntricos | Halos, focos, viñetas |
| conic-gradient(from ángulo, …) | Rotación alrededor del centro | Gráficos de tarta, ruedas de color, bordes animados |
Consejos para degradados logrados
- Mantente en tonos vecinos (análogos) para un resultado suave; los tonos opuestos pasan por zonas grises apagadas.
- Para texto degradado, combina background-clip: text con color: transparent.
- En superficies grandes, añade un ruido sutil para evitar bandas visibles (banding).
- Cuida el contraste: un texto sobre un degradado debe seguir siendo legible en toda la gama de colores.
El código generado usa colores hexadecimales para máxima compatibilidad. Puedes sustituirlos por variables CSS (var(--mi-color)) en tu proyecto.
Preguntas frecuentes
¿Qué diferencia hay entre linear, radial y conic?
linear-gradient avanza en línea recta según un ángulo; radial-gradient irradia del centro hacia fuera; conic-gradient gira alrededor del centro como una rueda de color. Los tres aceptan las mismas listas de colores.
¿Cuántos colores puedo usar?
La herramienta admite hasta 6 paradas, que cubren casi cualquier necesidad. En CSS puro el número es ilimitado, pero con más de 4 o 5 colores un degradado se vuelve difícil de controlar.
¿Qué significan los porcentajes junto a los colores?
Es la posición de la parada a lo largo del eje del degradado: 0 % al inicio, 100 % al final. Dos paradas cercanas crean una transición nítida; dos lejanas, un fundido gradual.
¿El código generado funciona en todos los navegadores?
linear-gradient y radial-gradient llevan años soportados en todas partes. conic-gradient está disponible en todos los navegadores modernos (Chrome 69+, Firefox 83+, Safari 12.1+).
¿Cómo animar un degradado CSS?
Los degradados no se animan directamente, pero hay dos técnicas que funcionan bien: animar background-position sobre un degradado sobredimensionado (background-size: 200 %), o animar los colores mediante propiedades personalizadas registradas con @property.