{
CF
}
Code
Fronts
Back to CSS Hero Sections
Video Loop Hero
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-vid { position: relative; width: 100%; min-height: clamp(220px, 28vh, 100vh); padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: system-ui, sans-serif; color: #fff; text-align: center; } .hs-vid-bg, .hs-vid-overlay { position: absolute; inset: 0; z-index: 0; } .hs-vid-bg svg { width: 100%; height: 100%; display: block; } .hs-vid-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%); } .hs-vid-c { position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hs-vid-tag { font-family: monospace; font-size: clamp(9px, 1.4vw, 11px); letter-spacing: 0.16em; color: #ff6c8a; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,108,138,0.4); } .hs-vid-c h1 { margin: 0; font-size: clamp(22px, 5vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; } .hs-vid-c p { margin: 0; font-size: clamp(11px, 1.5vw, 16px); color: rgba(255,255,255,0.85); } .hs-vid-cta { padding: 9px 20px; border-radius: 7px; background: rgba(255,255,255,0.95); color: #0e0e16; font-size: clamp(11px, 1.5vw, 14px); font-weight: 700; text-decoration: none; margin-top: 4px; transition: transform 0.15s; } .hs-vid-cta:hover { transform: translateY(-1px); }
<section class="hs-vid"> <div class="hs-vid-bg" aria-hidden="true"> <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice"> <defs> <linearGradient id="hs-vid-g" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#1a0840"/> <stop offset="50%" stop-color="#3d1a6b"/> <stop offset="100%" stop-color="#0a3d2a"/> </linearGradient> </defs> <rect width="400" height="240" fill="url(#hs-vid-g)"/> <circle cx="80" cy="60" r="40" fill="rgba(255,255,255,0.08)"/> <circle cx="320" cy="180" r="60" fill="rgba(124,108,255,0.16)"/> <circle cx="200" cy="120" r="80" fill="rgba(255,108,138,0.10)"/> </svg> </div> <div class="hs-vid-overlay"></div> <div class="hs-vid-c"> <span class="hs-vid-tag">▶ AUTOPLAY</span> <h1>Show, don't tell.</h1> <p>Hero video that loops silently behind your story.</p> <a class="hs-vid-cta" href="#">Watch the demo</a> </div> </section>
Live preview
Ready