Skip to content

component

Glass Before After

By Tuna Erhanoglu

Details

Summary

Glass UI Interactive Before/After Card

Description

Glass Before/After Card A before/after comparison card that follows your cursor. No clicking. Just magic. The split tracks your mouse, the card tilts gently in 3D, and a soft glow follows along. Touch users get tap and drag. Everyone gets the same premium feel. Three opinionated presets: Subtle , Glass , Showcase . Switch the vibe with one click. Features 🪄 Cursor-following split, no drag required 🎴 Subtle 3D tilt that tracks your pointer 💎 Three presets: Subtle, Glass, Showcase 📐 Six aspect ratios + Auto + Fit Content support 📱 Touch & pen ready. Tap to jump, drag anywhere Made for Portfolios · AI tools · Product launches · Photo retouching · UI redesigns · Architecture · Color grading · Anywhere you need to say "this became this." Quick start 1. Drop the component onto the canvas 2. Add your before & after images 3. Pick a style and aspect ratio 4. Publish No setup. No CSS. Works in Fixed, Fill, and Fit Content. Tips Use matching aspect ratios for both images Glass and Showcase shine on dark backgrounds Keep labels short: Before / After , Original / Edited

Introduction

Glass UI Interactive Before/After Card

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400145348/148/228/309/79/15
  • All · #2707