Skip to content
innovando.space

Effects / Cards

Neon Glass Card

Testing

A frosted glass card lit from behind: two light sources bloom under the pane and reach the eye already diffused, while a thread of light runs along the edge.

activation="hover"

Lit from behind

Hover the pane: the two lights wake up under the glass and lean towards your pointer, and a thread of light runs along the edge. Reach the button with the Tab key and it lights up the same way.

Default. Lit by the pointer or by keyboard focus inside the card.

activation="always"

Already on

Lit from the start. The comet makes one lap and the lights settle, then everything rests: motion that starts by itself stops within five seconds.

For a featured item that should glow without waiting for a pointer.

Same mechanics, another identity

Cold light, round corners.

Same component. The website chose cyan and violet, a clearer pane, rounder corners and a card that rises a little under the pointer. Nothing in the package changed.

Proof of the rule: two websites, one effect, no resemblance.

Use it in a website

Wrap any content in the component. What you put inside stays your own HTML:

---
import NeonGlassCard from '@innovando/in-fx/components/NeonGlassCard.astro';
---

<NeonGlassCard as="article">
  <h3>Your title</h3>
  <p>Your text. Links and buttons stay fully reachable.</p>
</NeonGlassCard>

Then give it the website's identity from the website's stylesheet. The glass only reads as glass when there is something behind it to blur: an image, a pattern, shapes. On a flat background it is a dark card with lights — still fine, just quieter.

/* In the website's own stylesheet — not in the package */
.ifx-neon-glass {
  --ifx-neon-glass-color-1: #00e0ff;
  --ifx-neon-glass-color-2: #7c4dff;
  --ifx-neon-glass-radius: 24px;
  --ifx-neon-glass-lift: 4px;
}

Variables

Every visual or timing decision is a CSS variable with a fallback.

VariableFallbackWhat it does
--ifx-neon-glass-color-1WebKit accent → currentColorFirst light behind the glass, and the head of the edge comet
--ifx-neon-glass-color-2WebKit accent strong → currentColorSecond light behind the glass, and the tail of the comet
--ifx-neon-glass-radiusWebKit radius → 0pxCorner radius
--ifx-neon-glass-surfaceWebKit surface → CanvasColour of the glass
--ifx-neon-glass-tint55%How much of that colour the glass carries
--ifx-neon-glass-frost14pxBlur of what lies behind the card
--ifx-neon-glass-saturate1.3Colour boost of what lies behind
--ifx-neon-glass-inkinheritText colour inside the card
--ifx-neon-glass-paddingWebKit large spacing → 2remInner padding
--ifx-neon-glass-hairlinecurrentColor at 16%Resting outline
--ifx-neon-glass-hairline-litcurrentColor at 28%Outline when lit
--ifx-neon-glass-hairline-width1pxOutline width
--ifx-neon-glass-sheencurrentColor at 14%Thin highlight on the top edge of the pane
--ifx-neon-glass-bloom-size75%Size of each light, relative to the card width
--ifx-neon-glass-bloom-strength0.85Strength of each light
--ifx-neon-glass-rest0.35How much light is left when the card is not lit
--ifx-neon-glass-edge1.5pxWidth of the light thread on the edge
--ifx-neon-glass-edge-strength1Maximum opacity of the thread
--ifx-neon-glass-sweep3.6sOne lap of the comet along the edge
--ifx-neon-glass-drift9sSlow drift of the lights behind the glass
--ifx-neon-glass-transition320msLight-up and fade-out time
--ifx-neon-glass-lift0pxHow far the card rises on hover
--ifx-neon-glass-parallax0.12How much the lights lean towards the pointer, 0–1

How it behaves for everyone

  • Keyboard

    Keyboard focus inside the card lights it exactly like the pointer does. A mouse click does not keep it lit. Your focus ring stays instant and untouched.

  • Touch

    There is no hover on a phone: in hover mode the card rests half-lit. Use activation="always" where the glow matters on touch.

  • Reduced motion

    The lights still glow, but they do not drift, lean or sweep.

  • High contrast

    In forced-colours mode the decorative light is removed and the outline uses the system colour.

  • Without JavaScript

    Everything works except the lights leaning towards the pointer. Glass, glow and edge are pure CSS.

  • Performance

    The glass blurs only the page behind it, which does not move. The lights move with translate and the comet with rotate: work the graphics card does on its own.