← Back to gallery
CSS

Shape-aware Halo via drop-shadow

A project-authored SVG glow showcase where drop-shadow halos hug badge, ring, and comet silhouettes instead of rectangular bounds.

glowhalodrop-shadowsvg

Glow / halo / drop-shadow / SVG

Shape-aware halo via drop-shadow

Reimplements alpha-aware glow with project-authored SVG marks so the glow follows the silhouette instead of a rectangular box, making irregular badges and icons feel luminous without flattening their transparent gaps.

beacon burst halo active — beacon burst halo

Diamond badge + locator ping

Beacon Burst

Beacon Burst uses a compact emblem so the glow wraps tightly around the diamond cutout and center pulse instead of filling the whole card.

Twin cyan shadows reinforce a crisp core before a wider aqua bloom spills outward.

  • svg badge
  • tight contour
  • dashboard beacon

Ring seal + offset satellite

Orbit Stamp

Orbit Stamp leaves negative space in the middle so the halo traces both the outer ring and the detached satellite dot as separate glowing silhouettes.

A magenta outer veil trails the ring while a lighter inner pass keeps the detached dot visible.

  • negative space
  • status seal
  • split silhouette

Star mark + tapered tail

Comet Crest

Comet Crest stretches one authored tail shape behind a bright head so the halo reads like motion, even though the filter still follows the alpha mask.

Two stacked drop-shadow values keep the tail readable while a cooler outer plume exaggerates direction.

  • directional tail
  • wayfinding
  • cool halo

Filter inspector

Beacon Burst

Glow logic
Twin cyan shadows reinforce a crisp core before a wider aqua bloom spills outward.
Filter recipe
drop-shadow(0 0 0.35rem rgba(186, 230, 253, 0.95)) drop-shadow(0 0 1.1rem rgba(34, 211, 238, 0.78))

Short offsets keep the inner mark readable while a larger blur expands outward like a navigational beacon over a dark dashboard.