.animated-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient( to bottom right, rgba(15, 25, 35, 0.95), rgba(25, 35, 45, 0.95) ); overflow: hidden; } .animated-background::before, .animated-background::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-size: 60px 60px; opacity: 0.08; pointer-events: none; animation: moveContours 90s linear infinite; will-change: transform; } .animated-background::before { background-image: repeating-linear-gradient( 45deg, cyan, cyan 5px, transparent 5px, transparent 25px ); } .animated-background::after { background-image: repeating-linear-gradient( -45deg, magenta, magenta 5px, transparent 5px, transparent 25px ); animation-direction: reverse; animation-duration: 120s; } @keyframes moveContours { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } }