{
CF
}
Code
Fronts
Back to CSS Hero Sections
Glass over Aurora
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.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; } }
<section class="hs-aur"> <span class="hs-aur-blob hs-aur-b1"></span> <span class="hs-aur-blob hs-aur-b2"></span> <span class="hs-aur-blob hs-aur-b3"></span> <div class="hs-aur-card"> <h1>The internet's design system.</h1> <p>A premium toolbox for crafting interfaces with intent.</p> <a class="hs-aur-cta" href="#">Explore →</a> </div> </section>
Live preview
Ready