Faking an aurora glow with nothing but inset shadows
css
box-shadow
dark-mode
frontend
Ask your agent to implement this
Read the full writeup at https://seangeng.com/writing/faking-a-glow-with-inset-shadows.md and implement it in my project.
It covers: Faking an aurora glow with nothing but inset shadows. How to make a dark tile look lit from within, with 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.
Requirements:
- Follow the technique/approach exactly as described in the writeup.
- Adapt names, colors, and styling to my project's existing conventions.
- If it's a component, make it reusable with sensible props and TypeScript types.
- Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion.
- When done, tell me which files you created or changed and how to use it.
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:
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.