Back to Snippets

CSS Animated Mesh Gradient Background

A softly moving color field behind a glass content panel. The colors shift and blend continuously with no JavaScript and no image files.

Four radial gradients are layered into a single background-image, one anchored to each corner. The layer is sized at 200 percent, so animating background-position slides those color blobs around inside the box. A 40 pixel blur filter melts their edges together, and that is what turns four separate circles into one mesh.

The keyframes walk the position around all four corners and back to the start, with alternate on the animation so the return trip stays smooth instead of snapping. Swap the four rgba colors for your own palette and keep the alpha well below 1, or the blobs stop blending. Raising the blur makes it softer, lowering it makes the individual gradients readable again.

399

#css

#background

#mesh gradient

#fluid

#blob

#animation

#modern ui

#hero

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0f172a;
}

.mesh-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.mesh-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f172a;
  background-image: 
    radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.6) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.6) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.6) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.6) 0px, transparent 50%);
  background-size: 200% 200%;
  animation: mesh-morph 10s ease-in-out infinite alternate;
  filter: blur(40px);
  z-index: 1;
}

@keyframes mesh-morph {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

.mesh-content {
  position: relative;
  z-index: 2;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  padding: 50px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.mesh-content h2 {
  font-size: 3rem;
  margin: 0 0 10px 0;
  letter-spacing: -1px;
}

.mesh-content p {
  color: #cbd5e1;
  font-size: 1.125rem;
  margin: 0 0 30px 0;
}

.mesh-btn {
  background: #ffffff;
  color: #0f172a;
  border: none;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.mesh-btn:hover {
  transform: translateY(-2px);
}

CSS Animated Mesh Gradient Background

Share Code Snippet