← Examples Gallery

Shadows & Depth (DOM)

The same shadow effects as the web component version, achieved with light DOM CSS on .alapelem.

All CSS on this page applies equally to popover mode — the menu renders as the same .alapelem element whether using DOM or popover.

Container Shadow

Apply box-shadow to the menu container for subtle elevation, glowing auras, or hard graphic offsets.

.alap_sh-subtle {
  box-shadow: 0 2px 8px #6366f1;
}

.alap_sh-glow {
  box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.5);
}

.alap_sh-hard {
  box-shadow: 8px 8px 0 #fbbf24;
  border-color: #fbbf24;
}

Container shadows affect the entire menu box. Use subtle shadows for clean elevation, glows for focus effects, and hard offsets for a graphic or retro look.

Per-Item Hover Shadow

Remove the container shadow entirely and add a glow only to the hovered item.

.alap_sh-item-hover {
  box-shadow: none;
}

.alap_sh-item-hover a:hover {
  box-shadow: 0 0 12px 2px rgba(99, 102, 241, 0.5);
}

Setting box-shadow: none on the container removes the default shadow. The hover shadow on individual items creates a spotlight effect that follows the cursor.

Container + Per-Item Shadow

Combine a container-level shadow with per-item hover effects for layered depth.

.alap_sh-both {
  box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.5);
}

.alap_sh-both a:hover {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.alap_sh-both-hard {
  box-shadow: 8px 8px 0 #fbbf24;
  border-color: #fbbf24;
}

.alap_sh-both-hard a:hover {
  box-shadow: inset 0 0 0 2px #fbbf24;
}

Layering container and item shadows creates visual hierarchy. The lift effect uses transform: translateY alongside a softened shadow, while the inset variant keeps items grounded with an inner border glow.

Text Shadow

Apply text-shadow to menu items for embossed or glowing text effects.

.alap_sh-text-emboss {
  background: #1e293b;
  border-color: #334155;
}

.alap_sh-text-emboss a {
  color: #e2e8f0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.alap_sh-text-neon {
  background: #0f172a;
  border-color: #0ea5e9;
}

.alap_sh-text-neon a {
  color: #22d3ee;
  text-shadow:
    0 0 7px #22d3ee,
    0 0 20px rgba(34, 211, 238, 0.5);
}

Text shadows work best on dark backgrounds where the glow or emboss is visible. Set background and color on the container to create the right contrast for the effect.

Glassmorphism

A frosted-glass effect using backdrop-filter with a semi-transparent background.

.alap_sh-glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

Glassmorphism relies on backdrop-filter to blur the content behind the menu. The semi-transparent background and subtle border complete the frosted-glass illusion. Works best over colorful or image backgrounds.

Menu Opacity

Reduce the overall menu opacity for a translucent, understated appearance.

.alap_sh-opacity {
  opacity: 0.85;
}

Unlike glassmorphism, plain opacity affects everything in the menu — background, text, and borders all become translucent together. Use sparingly to avoid readability issues.