← Back to gallery
CSSFeatured

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.

Duration
3s
Resolution
1440×900
Format
CSS
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