Qué es un gradiente CSS
Un gradiente es una transición suave entre dos o más colores que el navegador dibuja como si fuera una imagen, sin descargar ningún archivo. En CSS se usa en cualquier propiedad que acepte imágenes, sobre todo en background. Con este generador eliges el tipo, ajustas el ángulo y añades paradas de color con el ratón; la vista previa se actualiza al instante y te devuelve el código listo para pegar en tu hoja de estilos.
Cómo usar la herramienta
- Elige el tipo de gradiente: lineal, radial o cónico.
- Si es lineal o cónico, mueve el control de ángulo (0° a 360°) o escribe el valor exacto.
- Ajusta cada parada de color con el selector y su posición en porcentaje.
- Pulsa Añadir parada para sumar colores (hasta 6) o la equis para quitarlos.
- Usa Aleatorio para generar una paleta agradable de golpe.
- Copia el bloque
background:con un clic.
Lineal, radial y cónico
Los tres tipos comparten la lista de paradas, pero cambian la forma en que se reparten:
| Tipo | Función CSS | Cómo fluye el color |
|---|---|---|
| Lineal | linear-gradient() | En línea recta según el ángulo |
| Radial | radial-gradient() | En círculos desde el centro hacia afuera |
| Cónico | conic-gradient() | Girando alrededor de un punto, como un reloj |
El lineal es el más común: banners, botones y fondos. El radial imita luces, focos y viñetas. El cónico sirve para ruedas de color, gráficos de sectores y efectos de destello.
Sintaxis de las paradas de color
Cada parada es un color seguido de una posición opcional. La sintaxis general es linear-gradient(90deg, #8B7CF6 0%, #22D3EE 100%). El primer valor de un gradiente lineal es el ángulo (0deg apunta hacia arriba, 90deg a la derecha, 180deg hacia abajo). En el cónico, el ángulo se escribe como from 45deg. El radial no lleva ángulo porque siempre irradia desde el centro.
Los porcentajes controlan dónde cae cada color: si dos paradas comparten posición, obtienes una franja dura en lugar de una mezcla; es el truco para dibujar rayas.
Ejemplo resuelto
Queremos un fondo violeta que se funda en cian en diagonal. Ponemos el tipo en lineal, el ángulo en 135° (de la esquina superior izquierda a la inferior derecha) y dos paradas: #8B7CF6 en 0% y #22D3EE en 100%. El código resultante es:
background: linear-gradient(135deg, #8B7CF6 0%, #22D3EE 100%);
Si queremos que el violeta ocupe más espacio, movemos la segunda parada del 100% al 70%: el cian arranca antes y la zona violeta crece. Añadiendo una tercera parada rosa #EC4899 en 100% conseguimos un degradado de tres colores sin tocar el resto.
Compatibilidad con navegadores
linear-gradient y radial-gradient funcionan en todos los navegadores modernos desde hace más de una década, sin prefijos. conic-gradient es más reciente pero ya está soportado en Chrome, Edge, Firefox y Safari actuales. Si necesitas dar servicio a navegadores muy antiguos, define primero un background-color sólido como reserva: el navegador que no entienda el gradiente mostrará ese color plano.
Preguntas frecuentes
¿Cómo hago un gradiente diagonal?
Usa un gradiente lineal con un ángulo intermedio. 45deg va de la esquina inferior izquierda a la superior derecha, y 135deg de la superior izquierda a la inferior derecha. Cualquier valor distinto de 0, 90, 180 o 270 grados produce una diagonal.
¿Puedo usar más de dos colores?
Sí. Añade tantas paradas como quieras hasta seis y reparte sus posiciones. Por ejemplo, linear-gradient(90deg, red 0%, orange 50%, yellow 100%) crea una transición de tres colores. Cuantas más paradas, más control tienes sobre dónde se mezcla cada tono.
¿Cómo pongo un gradiente de fondo a pantalla completa?
Aplica el gradiente al elemento raíz y dale altura completa: en tu CSS escribe la regla sobre body con min-height: 100vh y el background que copiaste aquí. Añade background-attachment: fixed si quieres que el gradiente no se desplace al hacer scroll.
¿Los gradientes pesan más que una imagen?
No. Se calculan en el navegador a partir de unas líneas de texto, así que no suman peticiones de red ni kilobytes, y escalan sin perder nitidez.