Animated Gradient Generator

Animated Gradient Background

This gradient animates smoothly across the background. The animation shifts the gradient position continuously for a dynamic effect.

Export Animated Gradient CSS

  .animated-gradient {
    background: linear-gradient(90deg, #33aaff);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }

  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }CopyCopy content

 .animated-gradient-border {
    --border-width: 3px;
    --gradient-angle: 90deg;
    --animation-duration: 8s;
    background: white;
    position: relative;
    border-radius: 0.5rem;
  }
  .animated-gradient-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    height: calc(100% + var(--border-width) * 2);
    width: calc(100% + var(--border-width) * 2);
    background-image: linear-gradient(
      var(--gradient-angle), #33aaff);
    background-size: 200% 200%;
    border-radius: calc(0.5rem + var(--border-width));
    z-index: -1;
    animation: gradient-shift var(--animation-duration) ease infinite;
  }

  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }CopyCopy content