Faking an aurora glow with nothing but inset shadows

There's a genre of app icon that looks like it's glowing from the inside — a deep black tile with a band of colored light welling up from the bottom edge. It reads like there's a light source hidden inside. There isn't. It's four inset shadows.

Inset shadows point the other way

The trick rests on one fact: an inset shadow with a negative Y offset paints its color along the bottom inner edge, not the top. Offset the shadow upward and the color pools at the floor of the box. Stack a few of those, each bigger and softer, and you get a glow that rises from the bottom.

box-shadow:
  inset 0 -20px 20px -6px rgba(255,255,255,.4),   /* hot white core   */
  inset 0 -40px 30px -8px rgba(102,148,255,.5),   /* lighter mid glow */
  inset 0 -80px 60px -30px #144ccd;               /* deep base glow   */

Three things give it depth:

• The white core. A small, bright white inset shadow makes the very lip of the glow look incandescent — the hottest part of any real light.
• Growing blur, growing negative spread. Each layer below the core is wider and blurrier, and its negative spread pulls it inward so it fades smoothly instead of hitting the side walls.
• A dark base gradient. The tile fills with linear-gradient(#0a0909, #09101f) — almost black, a hair of blue at the bottom — so the glow has something deep to bloom against.

The outer bloom

Inset shadows stay inside the box, so the halo around the tile needs two ordinary (outset) shadows underneath everything:

0 22px 70px -12px rgba(47,107,255,.45),  /* colored bloom below */
0 10px 28px -6px  rgba(0,0,0,.55);       /* dark ambient        */

That's the part you'd reach for a "Beautiful Shadow"-style plugin for in a design tool — in CSS it's just two more entries in the same box-shadow.

Make it scale and recolor

Hard-coded pixel offsets only look right at one size. Multiply every value by a unit derived from the size, and drive the hue from one variable:

.glow-tile {
  --glow-size: 240px;
  --glow-color: #2f6bff;
  --u: calc(var(--glow-size) / 400);
  --glow-deep: color-mix(in srgb, var(--glow-color) 80%, #000);
}
/* …then every offset/blur/spread is calc(<px> * var(--u)) */

Now <GlowTile color="#7C5CFF" size={180} /> is a violet glow at any size, and the deep and soft tones mix themselves from the one color you pass.

Takeaways

• An inset shadow with a negative Y offset glows from the bottom — stack them to fake an internal light source.
• A small white inset core sells the heat; wider blurred layers with negative spread fade it out.
• Multiply offsets by a size-derived unit and mix tones from one --glow-color, and the effect scales and themes for free.

Grab the recolorable component on the Glow Tile page.