Generador de degradados CSS
Crea un degradado de forma visual y copia el CSS.
- Se ejecuta en tu navegador — tu texto no se envía a ningún sitio
- Sin registro, sin cuotas, gratis para usar tantas veces como quieras
Cómo funciona
Los degradados se escriben en CSS como una única declaración cuya sintaxis es fácil de recordar mal, sobre todo la convención del ángulo y dónde van las paradas de color. Ver el resultado mientras lo ajustas es más rápido que recargar una página para comprobarlo.
La convención del ángulo confunde a la gente
En CSS, 0 grados apunta hacia arriba y el ángulo aumenta en sentido horario, así que 90 grados va de izquierda a derecha y 180 grados de arriba abajo. Es distinto de la convención matemática y de varias herramientas de diseño, por eso un degradado copiado de otro sitio suele salir girado.
Los tres tipos
El lineal sigue una línea recta y cubre casi todos los usos reales. El radial se expande hacia fuera desde un punto, lo que sirve para resplandores y focos de luz. El cónico barre alrededor de un centro y es la base de los gráficos circulares y las ruedas de color.
Un degradado es una imagen, no un color
Esto es lo otro que hace tropezar a la gente. CSS trata un degradado como una imagen de fondo, así que funciona en background y background-image, pero no en color, border-color ni en nada que espere un color simple. Los degradados en texto necesitan background-clip, que es una técnica aparte.
Añadir un color intermedio
Dos paradas dan una mezcla limpia. Una tercera te permite hacer pasar la transición por otro tono, lo que evita el gris apagado que aparece cuando dos colores opuestos se mezclan directamente.
Generador de degradados CSS: preguntas
¿Hacia dónde va el ángulo?
0 grados apunta hacia arriba y los ángulos aumentan en sentido horario, así que 90 grados va de izquierda a derecha.
¿Por qué mi degradado no funciona en el texto?
Un degradado es una imagen de fondo, no un color. Los degradados en texto necesitan background-clip como paso aparte.
¿Cuándo debería usar radial o cónico?
Radial para resplandores y focos de luz, cónico para efectos de gráfico circular y rueda de color. El lineal cubre la mayoría de los demás casos.