CSS Animated Gradient Border

Create an eye-catching animated gradient border around an element using CSS. Perfect for highlighting cards, buttons, or important sections.

HTML CSS JavaScript Output Live Updates

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
}
.animated-gradient-border-box {
  --border-width: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 150px;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  color: white;
  background: #222;
  border-radius: var(--border-width);
}
.animated-gradient-border-box::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(
    60deg,
    hsl(224, 85%, 66%),
    hsl(269, 85%, 66%),
    hsl(314, 85%, 66%),
    hsl(359, 85%, 66%),
    hsl(44, 85%, 66%),
    hsl(89, 85%, 66%),
    hsl(134, 85%, 66%),
    hsl(179, 85%, 66%)
  );
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 4s alternate infinite;
}
@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
.content-inside {
  padding: 20px;
  text-align: center;
}