🎨 Generador de Degradados Animados

.gradient-mov { background: radial-gradient(100% 100% at var(--x1) var(--y1), #3cc2dd 0%, transparent), radial-gradient(100% 100% at var(--x2) var(--y2), #00FAA7 0%, transparent), #1b253b; animation: gradientMove 2s infinite ease-in-out; } @property --x1 { syntax: ''; inherits: false; initial-value: 20%; } @property --y1 { syntax: ''; inherits: false; initial-value: 80%; } @property --x2 { syntax: ''; inherits: false; initial-value: 80%; } @property --y2 { syntax: ''; inherits: false; initial-value: 20%; } @keyframes gradientMove { 0% { --x1: 20%; --y1: 80%; --x2: 80%; --y2: 20%; } 25% { --x1: 15%; --y1: 15%; --x2: 85%; --y2: 80%; } 50% { --x1: 80%; --y1: 15%; --x2: 15%; --y2: 85%; } 75% { --x1: 85%; --y1: 80%; --x2: 20%; --y2: 15%; } 100% { --x1: 20%; --y1: 80%; --x2: 80%; --y2: 20%; } }