Skip to content
← components

Glow Tile

new

A near-black app-icon tile with an aurora glow rising from the bottom — four stacked inset shadows plus an outer bloom. Recolors from one variable; scales to any size.

glow color
outer glow

hover to lift & brighten · every shadow scales with size

Usage

example.tsx
import { GlowTile } from "~/components/glow/glow-tile";


<GlowTile color="#2F6BFF" size={240} bloom intensity={1} radius={80}>
  <Icon className="size-16 text-white/90" />
</GlowTile>

How the glow works

The tile is a dark vertical gradient with no glowing element inside — the light is faked entirely with inset shadows. An inset shadow with a negative Y offset paints its color along the bottom inner edge, so a stack of them builds a glow that rises from the floor of the tile.

Four layers do it: a deep saturated base (big blur, big negative spread), a lighter mid tone, a hot white core for the bright lip, and a faint top-edge tint. An outer bloom and a dark ambient shadow sit underneath for the halo. Every offset, blur, and spread is multiplied by --u (size / 400), so the whole effect scales cleanly, and all the hues are mixed from a single --glow-color.

glow-tile.css
.glow-tile {
  --glow-size: 240;                             /* unitless → × 1px */
  --glow-color: #2f6bff;
  --u: calc(var(--glow-size) / 400);            /* scale unit */
  --glow-deep: color-mix(in srgb, var(--glow-color) 90%, #000);
  --glow-soft: color-mix(in srgb, var(--glow-color) 55%, #fff);
  width: calc(var(--glow-size) * 1px);
  height: calc(var(--glow-size) * 1px);
  border-radius: calc(80px * var(--u));
  background: linear-gradient(180deg, #0a0909, #09101f);
  box-shadow:
    /* outer bloom + ambient */
    0 calc(22px*var(--u)) calc(70px*var(--u)) calc(-12px*var(--u))
      color-mix(in srgb, var(--glow-color) 45%, transparent),
    0 calc(10px*var(--u)) calc(28px*var(--u)) calc(-6px*var(--u)) rgba(0,0,0,.55),
    /* inner: top edge → white core → mid → deep base */
    inset 0 calc(6px*var(--u))   calc(6px*var(--u))  calc(-2px*var(--u))
      color-mix(in srgb, var(--glow-color) 60%, transparent),
    inset 0 calc(-20px*var(--u)) calc(20px*var(--u)) calc(-6px*var(--u)) rgba(255,255,255,.4),
    inset 0 calc(-40px*var(--u)) calc(30px*var(--u)) calc(-8px*var(--u))
      color-mix(in srgb, var(--glow-soft) 50%, transparent),
    inset 0 calc(-80px*var(--u)) calc(60px*var(--u)) calc(-30px*var(--u)) var(--glow-deep);
}

Props

proptypedefaultdescription
colorstring"#2F6BFF"Glow hue; deep/mid/bloom all derive from it.
sizenumber240Tile width = height in px; shadow geometry scales with it.
bloombooleantrueShow the outer bloom + ambient halo.
intensitynumber1Inner glow strength multiplier (≈0.4–1.4).
radiusnumber80Corner radius in 400-space (scales with size).
childrenReactNode—Centered contents (e.g. an icon).
…propsHTMLAttributes—Any native div prop (className, style, …).