---
title: "Glass Before After — Free Framer component · Best of Framer"
description: "Free Framer component · by Tuna Erhanoglu · Interactive. Glass UI Interactive Before/After Card"
canonical: "https://framer.elliotli.dev/component/glass-before-after"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Glass Before After

# Glass Before After

Glass UI Interactive Before/After Card

[View on Framer](https://framer.com/marketplace/components/glass-before-after/?via=elliot-li)

![Glass Before After preview image 1](https://framer.elliotli.dev/og/component/glass-before-after/be48a1751ce72005/1600x1200.jpg)

## 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_
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5646

## Details

- **Author**: Tuna Erhanoglu
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-04
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase