Glass Effects
Glass Effects
This page tests the enhanced glassmorphism effects applied to Material surfaces. Switch to the Glassmorphism theme using the theme switcher to see:
- Edge-lighting border gradient — angled 135° light-catching border
- SVG displacement filter — subtle edge refraction on glass surfaces
- Inner glow — diffuse light scattering on elevated and floating surfaces
- Top-edge refraction — bright highlight line at the top edge
Glass Variant Grid
All 12 Material variants (3 sizes × 4 elevations) over a colorful background. Switch to the Glassmorphism theme to see edge lighting, inner glow, and displacement effects.
small
flatsmall/flat
defaultsmall/default
elevatedsmall/elevated
floatingsmall/floating
medium
flatmedium/flat
defaultmedium/default
elevatedmedium/elevated
floatingmedium/floating
large
flatlarge/flat
defaultlarge/default
elevatedlarge/elevated
floatinglarge/floating
Floating Glass Over Scrollable Content
A floating Material surface fixed over scrollable colored content. Scroll to test backdrop blur and edge refraction in motion.
Floating Glass CardScroll the content below to see the backdrop blur and edge refraction effect through this surface.
Overview
Details
Settings
Dashboard
Analytics
Settings
Coral SunriseScrollable item 1
Violet DreamScrollable item 2
Emerald GlowScrollable item 3
Amber FireScrollable item 4
Fuchsia BloomScrollable item 5
Ocean BlueScrollable item 6
Lime FreshScrollable item 7
Indigo NightScrollable item 8
Rose FlameScrollable item 9
Teal WaveScrollable item 10
Stacked Glass Surfaces
Multiple Material surfaces layered on top of each other to test how glass borders interact when stacked.
Outer SurfaceThis is an elevated large Material containing nested surfaces.
Inner ASmall / Default
Inner BSmall / Elevated