Glass over Aurora — Playground

{CF} CodeFronts Back to CSS Hero Sections Glass over Aurora Pure CSS

Edit any tab — preview updates live

.hs-aur {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background: #0e0e16;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: system-ui, sans-serif; color: #f0eeff;
}
.hs-aur-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  animation: hs-aur-drift 18s ease-in-out infinite alternate;
}
.hs-aur-b1 { width: 60%; aspect-ratio: 1; background: rgba(124,108,255,0.5);  top: -20%; left: -10%; }
.hs-aur-b2 { width: 50%; aspect-ratio: 1; background: rgba(255,108,138,0.5);  bottom: -25%; right: -10%; animation-delay: -6s; }
.hs-aur-b3 { width: 40%; aspect-ratio: 1; background: rgba(46,184,138,0.45); top: 35%; left: 50%; animation-delay: -12s; }
.hs-aur-card {
  position: relative; z-index: 1;
  max-width: 480px; padding: clamp(16px, 3vw, 32px);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.hs-aur-card h1 {
  margin: 0; font-size: clamp(18px, 4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: #fff;
}
.hs-aur-card p { margin: 0; font-size: clamp(11px, 1.5vw, 15px); color: rgba(255,255,255,0.85); }
.hs-aur-cta {
  padding: 7px 16px; border-radius: 7px;
  background: #fff; color: #0e0e16;
  font-size: clamp(11px, 1.5vw, 13px); font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s;
}
.hs-aur-cta:hover { transform: translateY(-1px); }
@keyframes hs-aur-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8%, -6%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .hs-aur-blob { animation: none; } }

Live preview Ready