wave

Animated CSS Gradient Generator

Ocean Presets

/* Animated Gradient - Generated by wave */

.gradient {
  background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  background-size: 300% 300%;
  animation: gradient-animation 10s ease infinite;
  animation-direction: alternate;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Copy this CSS and add the .gradient class to your element.

Gradient Type

Angle

180°

Animation Speed

10s
FastSlow

Animation Direction

Color Stops

0%
50%
100%