Generador de degradados CSS — Lineal y radial
Previsualiza degradados de dos colores y copia su declaración CSS background
Funciona en tu navegador · no se sube nada
Las posiciones van de 0 a 100 %; la inicial no puede superar a la final. Los degradados radiales se extienden desde el centro hacia fuera.
CSS del degradado generado.
Cómo se usa
- Elige un degradado lineal o radial.
- Selecciona el color inicial y el final.
- En un degradado lineal, fija el ángulo; después ajusta las dos posiciones de color entre 0 y 100 %.
- Revisa la vista previa y copia el CSS en la regla de estilo de tu elemento.
Paradas de color y dirección
Los colores se escriben en hexadecimal de seis dígitos. Antes de la primera parada, el degradado mantiene el primer color; después de la segunda, mantiene el segundo. La zona entre ambas contiene la transición. La posición inicial no puede ser mayor que la final.
Los degradados lineales siguen el ángulo seleccionado. Los radiales usan radial-gradient(circle, ...) y se extienden desde el centro hacia fuera. En modo radial no se usa el control de ángulo. Si tu elemento final tiene proporciones distintas a las de la vista previa, el reparto visible de los colores puede cambiar.
Ejemplos
linear-gradient(90deg, #6366f1 0%, #ec4899 100%)pasa del morado a la izquierda al rosa a la derecha.- Poner las dos paradas al 50 % crea una división nítida entre los colores.
- En modo radial, mover la primera parada al 25 % amplía la zona de color sólido alrededor del centro antes de que empiece la mezcla.
Cómo aplicar el resultado
La declaración generada usa la propiedad abreviada background, que puede restablecer otras propiedades de fondo del mismo elemento. Revisa las reglas existentes antes de pegarla en tu hoja de estilos.
Esta herramienta admite dos colores opacos. Para más paradas o colores transparentes, edita el CSS copiado por tu cuenta. Si hay texto sobre el degradado, comprueba el contraste en todas las zonas que quedan detrás del texto, no solo en uno de los extremos. La vista previa muestra el fondo, no es una revisión completa de accesibilidad. Todo se genera en tu navegador.
Preguntas frecuentes
¿Hacia dónde apuntan los ángulos en CSS?
En un degradado lineal, 0 grados apunta hacia arriba, 90 grados hacia la derecha y 180 grados hacia abajo. El ángulo controla la dirección en la que avanzan los colores.
¿Qué pasa si las dos paradas de color tienen la misma posición?
Los colores cambian de golpe en esa posición y se forma un borde nítido en lugar de una transición suave.
¿Exporta una imagen?
No. Genera una declaración CSS background. El navegador dibuja el degradado según el tamaño del elemento al que lo apliques.
¿Puedo usar más de dos colores o transparencia?
La herramienta trabaja con dos colores opacos. Para añadir más paradas o colores transparentes, edita a mano el CSS copiado.
