Escribir un degradado a mano obliga a editar el CSS, guardar y recargar hasta que el ángulo parece correcto. Este generador te da una vista previa en directo: elige el tipo, el ángulo y las paradas de color, observa el resultado y copia un CSS listo para producción, sin prefijos y compatible con todos los navegadores actuales.
0deg apunta hacia arriba y los ángulos aumentan en el sentido de las agujas del reloj, así que 90deg va de izquierda a derecha y 180deg de arriba abajo. Es distinto de la convención matemática y confunde a menudo.
Porque interpolar en sRGB pasa por un punto intermedio desaturado, sobre todo entre colores complementarios. Añadir una parada intermedia o usar la interpolación en oklch de los navegadores modernos lo soluciona.
No. linear-gradient y radial-gradient sin prefijo funcionan en todos los navegadores actuales desde hace años. Los prefijos solo añaden peso.
No directamente con una transición, porque background-image no se interpola. El truco habitual es animar background-position sobre un degradado más grande o usar propiedades personalizadas registradas con @property.
Formateador JSON · Codificador Base64 · Codificador de URL · Decodificador JWT · Ver todas las herramientas
También disponible en: English · Português · Français · Deutsch