Anatomy of Decorative Background

DecorativeBackground is the light sibling of GradientBackground: same shell, same ownership probe, different default paint. Use it when you want a soft wash behind a hero or section without introducing motion or canvas cost.

The default wash

The bake is a single background shorthand — a large radial anchored near the top of the frame:

const baseStyle = {
  background:
    "radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%)",
} as React.CSSProperties;

125% 125% makes the ellipse oversized so the fade feels soft at the edges. at 50% 10% parks the bright center just below the top — content near the middle of the frame sits on the cooler mid-tones.

Why ownership still matters

Identical contract to Gradient:

const ownsBackground =
  style != null && BACKGROUND_KEYS.some((key) => key in style);
style={ownsBackground ? style : { ...baseStyle, ...style }}

Presets (decorativeBackgroundPresets) are just different background strings — top bloom, bottom bloom, corner ellipse. There is no second component; swap the style object and the bake drops because a background key is present.

Flip at 50% 10% to at 50% 90% and the wash reads as a floor glow. Corner blooms combine an ellipse with a solid base fill in one shorthand.

Stacking contract

aria-hidden="true"
className={`absolute inset-0 z-base ${className ?? ""}`}

First child of relative. Content at z-raised. Same z-scale as every other GodUI overlay — z-base for the plane, never a magic number.

Because the wash is static CSS, there is no prefers-reduced-motion branch and no observers. The only a11y work is staying out of the tree.

The result

One shorthand, one ownership rule, same stacking shell as the rest of the preset family.