Back to Glassmorphism Showcase

New Glass Card Ideas

Design enhancements we don't have yet. Each one would add something new to our glass cards. Look at each idea and tell us: do we need it, would it be nice, or skip it?

Marianne — here's what to do:
1. Scroll through the ideas below — each has a preview link you can open
2. At the bottom is a decision table — tap NEED, NICE, or SKIP for each
3. Press the blue "Copy Choices" button
4. Paste into a message to Armando

How cards appear on the page

These change what happens when you scroll down and a card first comes into view.

Idea 1

Light-Catch Shimmer

A diagonal stripe of light sweeps across the glass card surface — like sunlight catching a window pane. Happens once when the card enters view, then again subtly on tap/hover.

Phone Tablet Desktop
See example on CodePen →
Idea 2

Glowing Gradient Edge

The card border glows softly when it enters view — a pulse of colour around the edges that fades after 2 seconds. Like the card is "waking up." Draws the eye to new content.

Phone Tablet Desktop
See example on CodePen →
Idea 3

Glass Curtain Reveal

A frosted glass sheet covers the card. As you scroll to it, the glass slides away to reveal the content underneath — like a curtain rising on a stage. Cinematic and theatrical.

Phone Tablet Desktop
See our V3 demo →

How cards look and feel

These change the visual quality of the glass surface itself.

Idea 4

Ocean-Tinted Borders

Instead of white card edges, use ocean-blue or teal tinted borders that match our colour palette. More cohesive, more premium. The current white edges are standard — tinted edges feel bespoke.

Phone Tablet Desktop
See example on CodePen →
Idea 5

Sandpaper Grain Texture

A very subtle texture on the glass surface — like fine sandpaper or frosted bathroom glass. Makes the cards feel more physical and real, less "digital." Microsoft uses this on Windows.

Phone Tablet Desktop
See example on CodePen →
Idea 6

Accent Colour Top Bar

A thin 3px Steel Blue line across the top edge of each card. Simple colour accent that immediately tells you "this is a card" and adds a premium magazine feel. Like a coloured tab on a folder.

Phone Tablet Desktop
See example on CodePen →

How cards respond to touch/interaction

These add feedback when you tap or interact with a card.

Idea 7

Tactile Press & Spring

When you tap a card, it presses down slightly then springs back up with a bounce. Satisfying physical feedback — like pressing a real glass panel. We have a demo of this already (V4).

Phone Tablet Desktop
See our V4 demo →
Idea 8

Cascading Spec Reveal

For property stats cards: numbers and specs cascade in line-by-line with a satisfying bounce. Each bullet appears after the previous one — like a list being typed. Makes dry data feel alive.

Phone Tablet Desktop
See our V2 demo →
Idea 9

Counter Number Roll

For facts/stats cards: numbers roll up from 0 to their final value like an odometer or slot machine. "590m²" counts from 0 to 590 when the card scrolls into view. We already have this — considering improvements.

Phone Tablet Desktop
See example on CodePen →

Desktop bonuses (hover only)

These only work with a mouse. Phone/tablet users see the card without the effect — still looks fine, just no extra magic.

Idea 10

3D Tilt on Hover

Card tilts slightly toward your mouse cursor — like you're holding a glass pane and tilting it. Adds depth and makes the glass feel real. Only on desktop — phone users see a flat card.

Desktop only
See example on CodePen →
Idea 11

Hover Blur Increase

Card becomes MORE frosted when you hover over it — like breathing on cold glass. The glass "deepens" under your cursor. Subtle but premium.

Desktop only
See example on CodePen →
Idea 12

Depth Parallax Layers

Different parts of the card (heading, body, image) shift at different speeds when you move your mouse — creates depth, like looking through a window into a room. Very premium.

Desktop only
See example on CodePen →

Navigation and system-level

These change how the navigation bar or overall page elements use glass.

Idea 13

Sliding Glass Nav Pill

The active page in the navigation gets a frosted glass pill that slides smoothly from link to link. Like a spotlight moving across the nav bar. Makes navigation feel fluid and alive.

Phone Tablet Desktop
See reference →
Idea 14

Animated Gradient Borders

A thin coloured gradient slowly rotates around the card border — like a slow-motion light trail. Very subtle. Could be used on just one or two "feature" cards per page to draw attention.

Phone Tablet Desktop
See tutorial →

Your Choices

Tap NEED (must have), NICE (would be lovely), or SKIP (not for us) for each idea. Then press the blue button to copy your choices.

Idea What it does Your pick
1. Light-Catch Shimmer Diagonal light sweep across card surface
2. Glowing Gradient Edge Border glows briefly when card appears
3. Glass Curtain Reveal Frosted layer slides away to reveal content
4. Ocean-Tinted Borders Blue/teal card edges instead of white
5. Sandpaper Grain Texture Subtle physical texture on glass surface
6. Accent Colour Top Bar Thin Steel Blue line along card top edge
7. Tactile Press & Spring Card presses down on tap, springs back
8. Cascading Spec Reveal Stats appear line-by-line with bounce
9. Counter Number Roll Numbers count up from 0 on scroll
10. 3D Tilt on Hover Card tilts toward mouse (desktop only)
11. Hover Blur Increase Glass deepens on hover (desktop only)
12. Depth Parallax Layers Card layers shift at different speeds (desktop)
13. Sliding Glass Nav Pill Active nav link gets sliding glass highlight
14. Animated Gradient Borders Slow rotating colour border on feature cards
Copied! Paste into a message to Armando.