Luminous Card

A dark card whose slit turns into a light source when the cursor arrives.

About this tool

A card that lights from the inside. A slit across its middle becomes a light source under the cursor, three stacked cones rise out of it, the shadows underneath deepen as they brighten, and the corner brackets pull in while the card lifts. Keyboard focus and touch reach the same lit state, so the effect is not reserved for a mouse. The palette, the corner radius, the bracket arms, the glow and the lift are all editable, and the whole thing is CSS with no JavaScript in the export.

In collections: CSS Cards & Animated Card Components CSS Hover Effects & Animations

Guide: CSS Cards: Build a Responsive, Accessible Card Component Text on Hover: Readable Tooltips and Hover Text Effects

UI/UX · HTML / CSS All tools

Copy

Show copy

Title

Description

Show icon

Card

Card width px

Card height px

Corner radius px

Light

Activation

hover always

Light intensity %

Palette

Ink

Surface

Motion

Transition ms

Stage

Stage colour

#ffffff