Animated Mesh Gradient Generator

Controls

Export

.mesh-gradient {
  background-color: #f8fafc;
  background-image:
    radial-gradient(67% 67% at 20% 25%, #22d3ee 0%, transparent 72%),
    radial-gradient(77% 77% at 70% 30%, #a78bfa 0%, transparent 72%),
    radial-gradient(64% 64% at 45% 70%, #fb7185 0%, transparent 72%);
  background-size: 140% 140%;
  background-position: 0% 0%;
  filter: blur(18px);
  animation: mesh-drift 34s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  from { background-position: 0% 20%; }
  to { background-position: 80% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-gradient { animation: none; background-size: 100% 100%; }
}

WebM support varies by browser. For classic gradients see gradient generator.