Before/After Image Comparison Slider (CSS clip-path + Range Input)
A draggable before/after comparison slider for showcasing edits, redesigns or photo retouching. The 'before' layer is clipped with clip-path: inset() driven by a CSS custom property, and the actual dragging is handled by a native input[type=range] stretched over the whole image and made invisible except for its thumb - so it's fully keyboard accessible (arrow keys move the divider) with zero JavaScript libraries, just one line of JS to sync the custom property on input.
Views: 4
2026
