Before/After Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Before/After Hero CSS + JS

Edit any tab — preview updates live

.hs-ba {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(16px, 3vh, 60px) clamp(16px, 4vw, 40px);
  background: #0e0e16;
  display: flex; flex-direction: column; align-items: center; gap: 12px; justify-content: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
}
.hs-ba-stage {
  position: relative;
  width: 100%; max-width: 480px; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(124,108,255,0.2);
}
.hs-ba-after, .hs-ba-before {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hs-ba-after  { background: linear-gradient(135deg, #7c6cff, #ff6c8a); }
.hs-ba-before { background: linear-gradient(135deg, #2a2a3e, #1a1a2e); clip-path: inset(0 50% 0 0); transition: clip-path 0.05s linear; }
.hs-ba-label {
  font-family: monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.5); color: #fff;
  position: absolute; top: 8px; right: 8px;
}
.hs-ba-label-l { left: 8px; right: auto; }
.hs-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff;
  pointer-events: none;
  transition: left 0.05s linear;
}
.hs-ba-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
  background: #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hs-ba-slider {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize;
  margin: 0;
}
.hs-ba-c { text-align: center; max-width: 480px; }
.hs-ba-c h1 { margin: 0 0 4px; font-size: clamp(16px, 3vw, 28px); font-weight: 800; }
.hs-ba-c p  { margin: 0; font-size: clamp(11px, 1.4vw, 14px); color: #b8b6d4; }

Live preview Ready