Cómo se usa
- Elija un Tipo de gradiente: una línea que cambia de color (lineal), una extensión desde el centro (radial) o un giro alrededor de un punto (cónico).
- Indique el Ángulo para un gradiente lineal o cónico. No se aplica a uno radial.
- Elija cada color en Paradas de color e indique su posición en porcentaje. Añada o quite paradas, de dos a seis.
- Pulse Copiar debajo de CSS y pegue la línea en su hoja de estilos, o parta de uno de los ajustes predefinidos.
Los tres tipos de gradiente
- Lineal: el color cambia a lo largo de una línea recta. Un ángulo de 0deg apunta hacia arriba y el ángulo gira en el sentido de las agujas del reloj, así que 90deg va de izquierda a derecha y 180deg de arriba abajo.
- Radial: los colores se extienden desde el centro en forma de círculo, desde la primera parada hasta la última.
- Cónico: los colores giran alrededor del centro, como las agujas de un reloj. El ángulo fija dónde empieza el primer color.
Paradas de color y sus posiciones
Una parada de color es un color en una posición de 0 % a 100 % a lo largo del gradiente. El editor escribe las paradas en orden de posición, así que el orden en que las introduzca no cambia la imagen. De dos a seis paradas mantienen el gradiente fácil de leer y el CSS corto.
El código es la sintaxis CSS estándar que leen los navegadores actuales, y la vista previa la pinta su navegador a partir del mismo valor, así que lo que ve es lo que recibe la hoja de estilos.
Ejemplo resuelto: el ajuste Amanecer
El ajuste Amanecer es un gradiente lineal de 135deg, que va desde la esquina superior izquierda hacia la inferior derecha. Tiene tres paradas: naranja en 0%, amarillo en 50% y rosa en 100%.
El CSS que da es: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);
Preguntas frecuentes
¿Qué significa 0deg en un gradiente lineal?
0deg apunta hacia arriba, así que con ese ángulo los colores cambian de abajo arriba. El ángulo gira en el sentido de las agujas del reloj: 90deg va de izquierda a derecha y 180deg va de arriba abajo.
¿Por qué mis paradas aparecen en otro orden en el código?
El código escribe las paradas en orden de posición, porque el CSS las lee en ese orden. Si introduce primero el 80% y después el 20%, el código muestra primero el 20%, y la imagen no cambia.
¿Puedo usar un color transparente?
Este editor admite colores sólidos escritos en hexadecimal. Para la transparencia, edite el código a mano y use un color con valor alfa.
¿Cuántas paradas de color puedo usar?
De dos a seis. El editor mantiene el número dentro de ese intervalo, así que el gradiente siempre tiene un inicio y un final.
¿El código funciona en todos los navegadores?
La sintaxis es la forma estándar que admiten los navegadores actuales. Compruebe el resultado en los navegadores que usan sus visitantes, especialmente si necesita dar soporte a versiones antiguas.
¿Se envía mi diseño a algún sitio?
No. El gradiente se construye en su navegador. No se guarda nada ni se envía a ningún servidor.
¿Puedo usar un gradiente para el color del texto?
Esta herramienta escribe solo la declaración de fondo. Poner un gradiente detrás del texto es posible, pero necesita más CSS del que escribe esta herramienta.
Fuentes
- MDN (en inglés): linear-gradient(), sintaxis del ángulo y de las paradas de color
- MDN (en inglés): radial-gradient(), forma final y posición
- MDN (en inglés): conic-gradient(), ángulo inicial y posiciones de las paradas
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.