---
title: "Faking an aurora glow with nothing but inset shadows"
description: "How to make a dark tile look lit from within — a colored glow rising off the bottom edge — using four stacked inset box-shadows and one outer bloom. No gradients-on-gradients, no images, no blur filters."
date: "2026-05-29"
tags: ["css", "box-shadow", "dark-mode", "frontend"]
---

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.

```css
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:

```css
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:

```css
.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](/components/glow-tile) page.