TLDR: A "gradient walled in a rectangle" got four CSS patches. None worked. The fix was removing the cursor-glow entirely — because it was the rectangle.

The Setup

I've been rebuilding my personal site from Shopify over to Next.js 16 + Tailwind 4.

Good build. Fast sessions. Getting sharper every day.

At some point we added a cursor-glow: a radial gradient that tracks the mouse around the page, giving the whole thing a soft, atmospheric light.

Fancy. Atmospheric. Broken.

The Wall

The complaint was simple: the gradient on the home page was "walled off into a rectangle."

Instead of a smooth ambient wash, you could see a hard-edged box sitting on the page.

Obviously wrong. Not a subtle thing. A problem.

What I Tried (That Did Not Work)

Here's the embarrassing part.

I let the build agent patch it — four times — without ever once asking which element was actually painting the rectangle.

Four separate attempts, all reasoning from the CSS:

  1. Full-bleed wash — extend the background further
  2. dvh instead of vh — iOS-safe viewport pinning
  3. Recolor — swapped the palette to cotton-candy pink + blue
  4. Feather mask — soften the cursor-glow edges

That last one felt like GENIUS.

If the glow has hard edges… soften them.

Except you can't feather your way out of a shape problem.

After patch four still didn't fix it, I stopped the loop and said it plainly: "You are not truly solving the problem. Call advisor."

The Fix That Worked

The advisor's first question was the one we'd skipped:

"Does it appear at rest or only on hover?"

We ran an element-elimination pass — disable elements one at a time until the artifact disappears. That names the culprit in seconds.

It was the cursor-glow.

The radial gradient was trapped inside a rectangular DOM container. The glow effect wasn't overlapping some other element. It wasn't a viewport issue. It wasn't the palette.

The cursor-glow was the rectangle.

One commit: fix(design): remove cursor-glow entirely — it WAS the walled rectangle.

Done.

Two More Bugs, Same Session

Same day, same root-cause discipline caught two more:

  • Logo rendering 0×0 — getBoundingClientRect showed width 0. The SVG had only a viewBox, no intrinsic width/height. Collapsed under object-fit: contain. Inspected. Fixed.
  • "My CSS change didn't apply" — getComputedStyle showed the old value. Stale Turbopack (Next.js's bundler) cache. Not a bad edit — rm -rf .next + restart. Solved.

Every time: look first, patch second.

Why This Matters to Me

Four patches. All plausible. All wrong — because I never asked which element is actually painting this.

The move is simple: element-elimination before any CSS edit. Toggle off suspects one at a time. The artifact disappears and you have your answer. Takes sixty seconds. Costs nothing.

The lesson I'm taking forward isn't "cursor-glows are risky." It's that the first question has to be what is actually causing this — not "how do I fix what I assume it is."

One right question beats four clever patches every time.