Colorful Gradient Drop Shadow (Code Snippet)

<div class="glow-card">
  <div class="card-content">
    <h2>Gradient Glow</h2>
    <p>This card casts a colored shadow.</p>
  </div>
</div>

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glow-card {
  position: relative;
  width: 300px;
  border-radius: 20px;
  /* The Gradient Background */
  background: linear-gradient(135deg, #FF6B6B 0%, #556270 100%);
  z-index: 1;
}

/* The Glowing Shadow */
.glow-card::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit; /* Inherit the gradient */
  border-radius: 20px;
  filter: blur(25px);
  opacity: 0.6;
  z-index: -1;
  transition: opacity 0.3s;
}

.glow-card:hover::after {
  opacity: 0.8;
}

.card-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 18px;
  margin: 2px; /* Slight offset to show border effect if desired */
  height: calc(100% - 4px);
  text-align: center;
}

h2 { margin: 0 0 8px; color: #111; }
p { margin: 0; color: #666; }

Colorful Gradient Drop Shadow

Share Code Snippet