RSK World - Glassmorphism Card Effect | Frosted Glass UI, Backdrop Blur, 3D Tilt | RSK World

Glass Cards 3D Tilt & Flip Modal & Toasts Theme & Blur Vanilla JS

Glassmorphism Card Effect is a modern frosted glass UI demo with backdrop blur and transparency. Features: 4 flip cards (Backdrop Blur, Transparency, Depth & Light, Responsive), 3D tilt on mouse move, shimmer animation, ripple on click, double-click to flip cards, glass modal, theme toggle (light/dark glass), blur intensity slider (4–24px), layout toggle (grid/list), glass tabs (Cards, Tips, About), gradient themes (Default, Sunset, Ocean, Aurora, Forest), cursor spotlight, floating orbs, glass particles, animated gradient border on hover, toast notifications, scroll-to-top FAB, keyboard shortcuts (? for help, 1–4 for card modals, C to copy CSS, Esc to close). Respects prefers-reduced-motion. HTML, CSS, Vanilla JavaScript. By rskworld.in.

If you find this Glassmorphism Card project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Glassmorphism Card

Glass Effects

Backdrop blur via backdrop-filter, semi-transparent backgrounds (rgba), glass border, box-shadow and inset highlights for depth. Light and dark glass themes. Blur intensity slider (4–24px). SVG noise texture for frosted realism.

backdrop-filter: blur(var(--blur-intensity))
background: var(--glass-bg), border: var(--glass-border)
box-shadow with inset 0 1px 0 for edge light
CSS variables: --glass-bg, --glass-border, --blur-intensity

Project Structure & Files

glassmorphism-card/ with index.html (main demo), styles.css (glassmorphism, themes, responsive, animations), script.js (3D tilt, modal, tabs, ripple, flip, theme, blur, copy CSS, shortcuts). No build step. Open index.html or serve folder.

glassmorphism-card/ – index.html, styles.css, script.js, README.md, LICENSE
No build step – open index.html or static server
Font: Segoe UI, system-ui
Zero dependencies; vanilla HTML, CSS, JavaScript

Theme & Gradient

Light/dark glass themes via body.dark-glass. CSS variables in :root and body.dark-glass. Gradient theme picker: Default, Sunset, Ocean, Aurora, Forest. Animated gradient background with floating orbs.

Light glass (default) and dark glass themes
Gradient themes: sunset, ocean, aurora, forest
Variables: --glass-bg, --glass-border, --text-primary
Animated gradientShift and floatOrb keyframes

3D Tilt & Card Flip

Cards with data-tilt follow mouse for 3D perspective. Double-click to flip and reveal CSS tips on back. Shimmer sweep, ripple on click, icon pulse. Animated conic gradient border on hover.

handleTilt() – perspective, rotateX, rotateY from mouse position
Double-click toggles .flipped, card-inner rotateY(180deg)
Shimmer, ripple, icon-pulse animations
conic-gradient border animation on hover

Navigation & Controls

Fixed glass nav with blur slider, layout toggle (grid/list), theme toggle, gradient picker, Copy CSS button, cursor spotlight toggle, help (?), Contact link. Glass tabs: Cards, Tips, About. Scroll-to-top FAB, toast notifications.

.glass-nav – fixed, backdrop-filter, blur slider
Layout toggle – grid vs list layout for cards
Keyboard: ? help, 1–4 card modals, C copy CSS, Esc close
Toast container, scroll-top FAB

What You Get

Static HTML/CSS/JS: glassmorphism-card/ folder with index.html, styles.css, script.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – glassmorphism-card/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Hover cards for 3D tilt; click to open modal; double-click to flip card. Use theme toggle (◐), gradient picker, blur slider, layout toggle (⊞), spotlight (◎). Press ? for shortcuts, C to copy CSS, 1–4 to open card modals.

glassmorphism-card/index.html – main demo
Blur slider adjusts --blur-intensity in real time
Accessibility: prefers-reduced-motion, ARIA labels
Author: Molla Samser | rskworld.in

Project Features

4 flip cards (Backdrop Blur, Transparency, Depth & Light, Responsive), 3D tilt, shimmer, ripple, card flip, glass modal, theme toggle, blur slider, layout toggle, glass tabs, gradient themes, cursor spotlight, floating orbs, glass particles, animated border, toasts, scroll-top FAB, keyboard shortcuts, reduced-motion support.