CSS Only Before/After Image Slider — Stepped Radio Positions, No JS

<div class="demo">
  <div class="compare">
    <input type="radio" name="split" id="split0" class="split-input" />
    <input type="radio" name="split" id="split25" class="split-input" />
    <input type="radio" name="split" id="split50" class="split-input" checked />
    <input type="radio" name="split" id="split75" class="split-input" />
    <input type="radio" name="split" id="split100" class="split-input" />

    <div class="compare-frame">
      <div class="layer layer-after">
        <span class="layer-tag tag-after">After</span>
      </div>
      <div class="layer layer-before">
        <span class="layer-tag tag-before">Before</span>
      </div>
      <div class="divider"></div>
    </div>

    <div class="stops" role="group" aria-label="Comparison slider position">
      <div class="stops-track">
        <label for="split0" class="stop" aria-label="Show all before"></label>
        <label for="split25" class="stop" aria-label="25 percent"></label>
        <label for="split50" class="stop" aria-label="50 percent"></label>
        <label for="split75" class="stop" aria-label="75 percent"></label>
        <label for="split100" class="stop" aria-label="Show all after"></label>
        <div class="stops-fill"></div>
        <div class="stops-handle"></div>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.compare { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }

.compare-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.layer { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; }
.layer-after { background: linear-gradient(135deg, #0f172a, #334155); }
.layer-before { background: linear-gradient(135deg, #fbbf24, #f97316); }
.layer-tag { font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.03em; }

/* The "before" layer is clipped from the right; its visible width is set
   per radio-checked state below, which is what creates the split effect */
.layer-before { clip-path: inset(0 50% 0 0); transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); transform: translateX(-1px); transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }

.split-input { position: absolute; opacity: 0; pointer-events: none; }

/* The five radios are direct children of .compare, placed before both
   .compare-frame and .stops, so the ~ general sibling combinator reaches
   into each of those two subtrees independently from the same state */
#split0:checked ~ .compare-frame .layer-before { clip-path: inset(0 100% 0 0); }
#split0:checked ~ .compare-frame .divider { left: 0%; }
#split25:checked ~ .compare-frame .layer-before { clip-path: inset(0 75% 0 0); }
#split25:checked ~ .compare-frame .divider { left: 25%; }
#split50:checked ~ .compare-frame .layer-before { clip-path: inset(0 50% 0 0); }
#split50:checked ~ .compare-frame .divider { left: 50%; }
#split75:checked ~ .compare-frame .layer-before { clip-path: inset(0 25% 0 0); }
#split75:checked ~ .compare-frame .divider { left: 75%; }
#split100:checked ~ .compare-frame .layer-before { clip-path: inset(0 0% 0 0); }
#split100:checked ~ .compare-frame .divider { left: 100%; }

.stops-track { position: relative; height: 26px; border-radius: 999px; background: #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.stop { position: relative; z-index: 3; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.split-input:focus-visible ~ .stops .stops-track .stop:hover { outline: 2px solid #6366f1; }
.stop:hover { outline: 2px solid #a5b4fc; }

.stops-fill { position: absolute; top: 50%; left: 0; height: 4px; background: #6366f1; border-radius: 999px; transform: translateY(-50%); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; }
.stops-handle { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #6366f1; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,0.3); transform: translate(-50%, -50%); transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; pointer-events: none; }

#split0:checked ~ .stops .stops-track .stops-fill { width: 0%; }
#split0:checked ~ .stops .stops-track .stops-handle { left: 0%; }
#split25:checked ~ .stops .stops-track .stops-fill { width: 25%; }
#split25:checked ~ .stops .stops-track .stops-handle { left: 25%; }
#split50:checked ~ .stops .stops-track .stops-fill { width: 50%; }
#split50:checked ~ .stops .stops-track .stops-handle { left: 50%; }
#split75:checked ~ .stops .stops-track .stops-fill { width: 75%; }
#split75:checked ~ .stops .stops-track .stops-handle { left: 75%; }
#split100:checked ~ .stops .stops-track .stops-fill { width: 100%; }
#split100:checked ~ .stops .stops-track .stops-handle { left: 100%; }