Glass construction

Build the effect as a layered system, not a single card style.

Strong glassmorphism comes from multiple coordinated layers: atmospheric background, translucent fill, refracted border, selective neon halo, a soft inner highlight, and dark grounding shadow. This page breaks the recipe into engineering-friendly parts.

Core blur

20px

Stroke rule

1px + inner edge

Glow stance

Perimeter only

Base background

A deep-space canvas with multiple radial blooms and low-contrast star grain.

Use stacked radial gradients over a near-black base to create atmospheric depth.

Keep the brightest blooms at the edges so content remains legible.

Translucent pane

The actual glass surface that carries content.

Use a dark translucent fill between 0.62 and 0.78 opacity with a 20px blur.

Let the pane tint carry subtle color, but maintain contrast above 4.5:1.

Border stroke

A thin edge that sharpens silhouette without flattening the pane.

Use a 1px border plus a slightly brighter inner edge to mimic a refracted rim.

Avoid thick borders; they break the suspended-glass illusion.

Outer glow

A controlled neon perimeter that signals focus and premium energy.

Apply a blurred gradient halo just outside the card, strongest on interactive or hero states.

Keep default glow intensity low and reserve full bloom for active states.

Inner highlight

A soft specular reflection to sell polished glass.

Use a top-weighted linear highlight with 8-18% opacity and a short vertical fade.

Bias highlights toward the upper edge instead of centering them.

Shadow / bloom

The depth anchor that separates glass from the cosmic background.

Mix a dense ambient shadow with colored bloom to preserve both separation and glow.

Use a dark shadow even on luminous cards so panels still feel grounded.

Layer demo

A single panel showing the core stack

The card below intentionally exaggerates the layers so engineers can see how the surface is built. Real product cards should tone the glow down unless the surface is actively selected.

Active glass pane

Chart focus panel

Use this treatment on hero cards, high-value confirmations, or featured widgets. For dense dashboards, reduce the glow opacity and blur softness by roughly one third.

Implementation notes

.glass-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--vibe-radii-lg);
  border: var(--vibe-stroke-standard);
  background: var(--vibe-colors-glass-surface);
  backdrop-filter: blur(var(--vibe-blur-md));
  box-shadow: var(--vibe-shadows-panel);
}

.glass-panel::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--vibe-gradients-neon-beam);
  filter: blur(14px);
  opacity: 0.34;
  z-index: -1;
}

.glass-panel::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--vibe-radii-lg) - 2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 28%);
  pointer-events: none;
}

Do / don't

Guidance that preserves the premium look.

The strongest references keep the visual language tight. These guardrails help keep new components aligned instead of drifting into generic glass cards or overly bright rainbows.

Do

Layer a dark pane, a soft highlight, and a halo instead of relying on one opaque gradient.
Use the brightest neon on selected buttons, chart peaks, and high-value stats.
Pair magenta and cyan for perimeter energy, then add gold or green sparingly for depth.

Don't

Do not fill every card with full-spectrum rainbow gradients; it makes the system feel noisy.
Do not use pure white borders or heavy drop shadows without blur softening.
Do not animate glows aggressively; the language should feel premium and controlled.

Recommendations

Default engineering ranges

These values are intentionally conservative so the system stays readable in dense interfaces.

Layer	Range	Why
Blur	16-24px	Keeps background legible while preserving depth.
Opacity	0.62-0.78	Enough tint for contrast without losing translucency.
Border	1-1.5px	Use thin strokes plus inner highlight for crispness.
Glow	20-36px default	Increase only for active or featured surfaces.
Shadow	Dark + colored bloom	Always keep a dark depth anchor beneath the panel.

Glass Construction