Neon Glass Card

A frosted card lit from behind by a travelling neon source, with editable copy, glyph and palette.

About this tool

A glass card where the light is behind the pane instead of painted on it. Two coloured sources bloom under the surface and reach the eye already diffused by the frost, because the bloom is a sibling of the glass rather than a child of it -- nest it and the effect collapses into a coloured shadow. A second mechanism runs the edge: a conic gradient clipped to a hairline ring, spun on its own node so it behaves identically in every browser. Hover, keyboard focus and touch all reach the same lit state, and an Activation control pins it on. Neon is the one thing the HorizonX palette cannot supply -- the brand is deliberately de-oranged and de-saturated onto near-black ink -- so the defaults borrow the two saturated accents the system already sanctions for functional use, and both stay colour controls with every alpha in the sheet derived from them, so one drag re-tints the whole card and leaves no stale accent behind. The glass itself is the system's own: design-system card radius, glass blur, hairline border and display type. Geometry runs off one unit derived from the card width, so a single slider rescales the card and nothing inside it drifts out of proportion. Five stroke glyphs, five editable copy fields, frost, tint, bloom intensity and spread, sweep cycle and hover lift. Reduced motion stops the sweep, not just the transitions. Edit it, then export one self-contained HTML file.

In collections: CSS Cards & Animated Card Components Liquid Glass CSS & Glassmorphism UI

Guide: CSS Cards: Build a Responsive, Accessible Card Component

UI/UX · HTML / CSS All tools

Copy

Show copy

Eyebrow

Title

Description