Diseña degradados CSS visualmente: crea lineales o radiales con ángulo y paradas de color, previsualízalos y copia el código generado.
Todas las operaciones se realizan localmente en tu navegador. Nada sale de tu dispositivo.
Los degradados CSS son imágenes generadas por el navegador en el momento de render: sin archivos, sin peticiones, independientes de la resolución. Tres sintaxis estándar cubren casi todas las necesidades visuales, y todas comparten el mismo patrón de paradas de color: una lista de pares color posición% que el navegador interpola entre sí.
| Función | Forma de la transición | Uso típico |
|---|---|---|
linear-gradient() | Los colores se mezclan a lo largo de una línea recta con ángulo | Fondos, botones, encabezados, relleno de texto |
radial-gradient() | Los colores se mezclan desde un centro hacia afuera en círculos/elipses | Efectos de brillo, viñetas, luces suaves |
conic-gradient() | Los colores giran en torno a un centro como una rueda | Spinners, gráficos de pastel, UI de rueda de color |
Un degradado lineal mezcla colores a lo largo de una línea recta con un ángulo (90° va de izquierda a derecha, 0° va de abajo a arriba). Un degradado radial mezcla desde un punto central hacia afuera en círculos o elipses. Un degradado cónico barre colores alrededor de un punto central como una rueda de color — perfecto para spinners y gráficos de pastel. Esta herramienta genera lineales y radiales; la sintaxis cónica sigue el mismo patrón de paradas.
El ángulo se mide en sentido horario desde el borde inferior: 0° apunta hacia arriba, 90° hacia la derecha, 180° hacia abajo y 270° hacia la izquierda. Así que el 90° por defecto es la mezcla clásica de izquierda a derecha. También puedes usar palabras clave como to right o to top left en lugar de un número.
Una parada de color es un color más su posición a lo largo del degradado, dada como porcentaje de 0% (inicio) a 100% (fin). El navegador interpola suavemente entre paradas consecutivas. Dos paradas en 0% y 100% dan una mezcla uniforme; añadir una parada en 50% fuerza a que el color intermedio caiga exactamente en el medio.
Sí, para la sintaxis estándar linear-gradient() y radial-gradient() todos los navegadores modernos — Chrome, Firefox, Safari, Edge — los renderizan de forma idéntica. Los degradados son una de las características CSS más estables y ya no necesitan prefijos de vendor. Esta herramienta solo genera sintaxis estándar.
No, los colores directamente — background-image no es animable. El truco común es hacer que el elemento del degradado sea mayor que su contenedor y animar background-position, o fundir a cruz dos capas de degradado con opacidad. El CSS que copias aquí es un degradado estático único, que es la base de cualquiera de esos trucos.
¿Vas a montar un componente completo después? Colócalo con el Generador de CSS Flexbox o el Generador de CSS Grid, dale profundidad con el Generador de Box Shadow y suaviza las esquinas en el Generador de Border Radius.
Si acabas de usar Generador de gradientes CSS, los siguientes pasos naturales son Generador de paletas de color, Convertidor de colores, Verificador de contraste de color, o explora todas las herramientas de Herramientas de archivos.