← Back to catalog📄 Implementation guide
Image / Media

Before/After Slider

Lets users drag between two versions of an image.

Useful, professional, clear

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: Design, restoration, SaaS demos

TonemapColor Lab
maui-coast_0417.dng · 6240×4160
Aerial view of a turquoise tropical coastline, fully colour-graded
Before · Camera RAW After · “Pacifica” LUT
LUT · Pacifica EXP +0.45 CONTRAST +22 TEMP +180 VIBRANCE +24
←→ or drag

Technique: clip-path: inset() on a duplicated image, revealed by a draggable, keyboard-accessible role="slider" divider (pointer + arrow keys)