About this snippet

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.

Size
2.3 KB
Uses
HTML, CSS
Loads
Nothing external
Views
496

Collections

Related snippets

<div class="mesh-wrapper">
  <div class="mesh-background"></div>
  <div class="mesh-content">
    <h2>Fluid Design</h2>
    <p>Experience the beauty of pure CSS mesh gradients.</p>
    <button class="mesh-btn">Get Started</button>
  </div>
</div>
*, *::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);
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save