Anatomy of Gradient Background

GradientBackground is intentionally boring infrastructure: one div, baked CSS, no animation loop. The craft is not the paint — it is how the component owns the background without colliding with caller overrides, and how it sits under content without stealing focus or stacking context.

The baked default

Out of the box you get PatternCraft's dark-radial-glow: a near-black base with a soft grey radial parked near the top of the frame.

const baseStyle = {
  backgroundImage:
    "radial-gradient(circle 500px at 50% 200px, #3e3e3e, transparent)",
  backgroundColor: "#020617",
} as React.CSSProperties;

That bake lives in the component source between @default-props markers so the registry / docs can surface the same strings. Presets are just other style objects — the component itself stays one file.

Who owns the paint

CSS shorthand and longhand do not merge cleanly. If a caller passes backgroundImage: "…" while the bake still sets backgroundColor, you can end up with a broken cascade. So the component probes a fixed key list:

const BACKGROUND_KEYS = [
  "background",
  "backgroundColor",
  "backgroundImage",
  "backgroundSize",
  "backgroundPosition",
  "backgroundRepeat",
  "backgroundBlendMode",
] as const;

const ownsBackground =
  style != null && BACKGROUND_KEYS.some((key) => key in style);

style={ownsBackground ? style : { ...baseStyle, ...style }}

• Owns — drop the bake entirely; caller style is the whole paint.
• Doesn't — spread bake first, then caller style (safe for non-background keys like opacity or filter).

Pass a preset from gradientBackgroundPresets the same way — any object that includes a background key triggers ownership.

Stack under content

The shell is always the same across the CSS preset family:

<div
  aria-hidden="true"
  className={`absolute inset-0 z-base ${className ?? ""}`}
  style={…}
/>

Drop it as the first child of a relative (usually overflow-hidden) container. Raise your copy with z-raised or higher from the GodUI z-scale — never arbitrary z-[1]. aria-hidden keeps the decorative plane out of the accessibility tree.

The result

One layer, one ownership rule, zero motion — a reliable stage for everything you put on top.