Background Gradient

Overview

The component supports all brand colors (primary, secondary, tertiary, red, yellow) and will automatically pick up new colors added to the equality-tokens.json file. The hex values are read directly from the JSON, keeping the component in sync with design tokens.

Theme Variants

Theme Primary

Theme Secondary

Theme Tertiary

Theme Red

Theme Yellow

Placement Variants

You can control where the background gradient appears by selecting its placement. Use the placement prop to choose between "full" (covering the entire container) or "top" (applying the gradient only to the top portion). This allows flexible use for backgrounds that need either total coverage or more subtle decoration across the top.

Placement Full

Placement Top