Parallax Mountain — Playground

{CF} CodeFronts Back to CSS Hero Sections Parallax Mountain Pure CSS

Edit any tab — preview updates live

.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