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 in there. There isn't. It's four inset shadows.

Inset shadows point the other way

The whole thing rests on one fact. An inset shadow with a negative Y offset paints its color along the bottom inner edge, not the top. Offset it upward and the color pools at the floor of the box. Stack a few of those, each bigger and softer than the last, 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   */

The depth comes from three things. The white core is a small, bright inset shadow that makes the very lip of the glow look incandescent, the hottest part of any real light. The layers below it get wider and blurrier, with growing negative spread that pulls them inward so they fade off smoothly instead of slamming into the side walls. And the tile fills with a near-black gradient (linear-gradient(#0a0909, #09101f), 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 under everything else:

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" plugin for in a design tool. In CSS it's 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. The trick that makes it work is the negative Y offset; everything after that is just tuning.

Grab the recolorable component on the Glow Tile page.