{
CF
}
Code
Fronts
Back to CSS Hero Sections
Parallax Mountain
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-prx { position: relative; width: 100%; min-height: clamp(240px, 32vh, 100vh); padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px); background: linear-gradient(180deg, #ffd479 0%, #ff8a6c 35%, #7c4ab8 100%); display: flex; align-items: flex-start; justify-content: center; overflow: hidden; font-family: Georgia, serif; color: #fff; } .hs-prx-sky { position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.18), transparent 70%); } .hs-prx-sun { position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%); width: clamp(60px, 14vw, 100px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff5d4 0%, #ffd479 60%, transparent 80%); box-shadow: 0 0 60px rgba(255,212,121,0.5); } .hs-prx-m { position: absolute; left: 0; right: 0; bottom: 0; width: 120%; height: 50%; } .hs-prx-m3 { z-index: 1; animation: hs-prx-drift1 20s ease-in-out infinite alternate; } .hs-prx-m2 { z-index: 2; height: 40%; animation: hs-prx-drift2 16s ease-in-out infinite alternate; } .hs-prx-m1 { z-index: 3; height: 32%; animation: hs-prx-drift3 12s ease-in-out infinite alternate; } .hs-prx-c { position: relative; z-index: 4; text-align: center; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); } .hs-prx-eye { font-family: monospace; font-size: clamp(9px, 1.3vw, 11px); letter-spacing: 0.16em; color: rgba(255,255,255,0.9); } .hs-prx h1 { margin: 0; font-size: clamp(24px, 5.5vw, 64px); font-weight: 700; font-style: italic; line-height: 1.05; letter-spacing: -0.02em; } .hs-prx p { margin: 0; font-family: system-ui, sans-serif; font-style: normal; font-size: clamp(11px, 1.5vw, 15px); color: rgba(255,255,255,0.92); } .hs-prx-cta { margin-top: 6px; padding: 8px 18px; border-radius: 0; background: transparent; color: #fff; border: 1.5px solid #fff; font-family: system-ui, sans-serif; font-size: clamp(10px, 1.3vw, 12px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background 0.15s, color 0.15s; } .hs-prx-cta:hover { background: #fff; color: #7c4ab8; } @keyframes hs-prx-drift1 { 0% { transform: translateX(-2%); } 100% { transform: translateX(2%); } } @keyframes hs-prx-drift2 { 0% { transform: translateX(2%); } 100% { transform: translateX(-3%); } } @keyframes hs-prx-drift3 { 0% { transform: translateX(-3%); } 100% { transform: translateX(3%); } } @media (prefers-reduced-motion: reduce) { .hs-prx-m1, .hs-prx-m2, .hs-prx-m3 { animation: none; } }
<section class="hs-prx"> <div class="hs-prx-sky" aria-hidden="true"></div> <div class="hs-prx-sun" aria-hidden="true"></div> <svg class="hs-prx-m hs-prx-m3" aria-hidden="true" viewBox="0 0 600 200" preserveAspectRatio="none"> <path d="M0,200 L0,140 L80,80 L140,120 L220,60 L300,110 L380,70 L460,120 L540,90 L600,130 L600,200 Z" fill="#1a1438"/> </svg> <svg class="hs-prx-m hs-prx-m2" aria-hidden="true" viewBox="0 0 600 200" preserveAspectRatio="none"> <path d="M0,200 L0,160 L60,120 L130,150 L210,100 L290,140 L380,110 L460,150 L540,120 L600,150 L600,200 Z" fill="#3a2a5a"/> </svg> <svg class="hs-prx-m hs-prx-m1" aria-hidden="true" viewBox="0 0 600 200" preserveAspectRatio="none"> <path d="M0,200 L0,180 L70,150 L150,170 L240,140 L320,165 L400,145 L480,170 L560,150 L600,170 L600,200 Z" fill="#5a4a82"/> </svg> <div class="hs-prx-c"> <span class="hs-prx-eye">— Untouched</span> <h1>Where the trail ends.</h1> <p>Reserve a peak. We'll handle the climb.</p> <a class="hs-prx-cta" href="#">Plan a trip</a> </div> </section>
Live preview
Ready