<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Gradient Border</title> <style> *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background-color: black; color: white; text-align: center; } main { display: grid; place-content: center; height: 100%; } .card { display: flex; flex-direction: column; position: relative; /* border: 1px solid red; */ width: 20ch; background-color: black; } /* this is the one where the magic happens */ .card::before { content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 8px); height: calc(100% + 8px); transform: translate(-4px, -4px); /* play with the degrees till you are happy with the animation effect */ background: linear-gradient(60deg, #5ff281, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f), 0 50%; /* effectively zooming in on the colors, needs to be higher than 100% 100% */ background-size: 300% 300%; /* can be whatever you want, but card must also have the same border radius */ border-radius: 8px; /* to make it appear as just the border, need a color set for the background of the card */ z-index: -1; animation: animated-gradient 2.5s alternate infinite; } .card h2 { margin-top: 1rem; margin-bottom: 2rem; } .card .card__price-per-month { margin-bottom: 2.5rem; } .card .link { margin-bottom: 1.5rem; } .card a { text-decoration: none; color: white; padding: 0.5rem 1rem; border: 2px solid white; /* for pill shape */ border-radius: 20%/50%; } .card a:is(:focus, :hover) { background-color: rgb(67, 64, 64); } @keyframes animated-gradient { 50% { background-position: 100% 50%; } } </style> </head> <body> <header> <h1>Animated Gradient Border</h1> <p>From a youtube short video, link to be added later.</p> </header> <main> <div class="card"> <h2>Premium</h2> <div class="card__price-per-month"> <span>$20</span> <span>/</span> <span>month</span> </div> <div class="link"><a href="#">Get started</a></div> </div> </main> </body> </html>