Animated Gradient Background

This animated gradient background uses CSS animations to create subtle motion, enhancing modern UI designs.

HTML

<div class="ss-bg animated">
  Animated Background
</div>

<div class="ss-bg animated">
  Animated Background
</div>

CSS

.ss-bg.animated{
  padding:27px;
  background:linear-gradient(270deg,#22c55e,#3b82f6,#a855f7);
  background-size:600% 600%;
  animation:bgMove 8s ease infinite;
  border-radius:11px;
  color:#ffffff;
}

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

.ss-bg.animated{
  padding:27px;
  background:linear-gradient(270deg,#22c55e,#3b82f6,#a855f7);
  background-size:600% 600%;
  animation:bgMove 8s ease infinite;
  border-radius:11px;
  color:#ffffff;
}

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

Notes

• Subtle animation
• Modern UI effect
• Performance-friendly

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.