Gradient

Ready to use

The gradient utilities paint a brand’s stroke or fill as a colour gradient instead of a flat colour. Today the bespoke treatment is Lexus copper; any other brand falls back to a branded gradient derived from its secondary accent (e.g. Toyota red), so the utilities always render a gradient rather than a flat swatch.

The copper stops themselves are specced on Color — design tokens can only carry flat values, so they live in the styleguide rather than in Figma’s variables. This page is the mechanism.

How it works

There are two utilities, and they are never the same layer:

• .tng-gradient-border repaints the element’s border as the gradient, clipped to the border region with background-clip: border-area — it follows whatever border the element already declares (a full ring, a bottom-only stroke, any radius).
• .tng-gradient-fill draws the gradient as a full-cover background behind the content.

Rested, the gradient sits at the left edge (reading as a left-to-right sweep); on hover it slides to the centre (a radial bloom). Hover the examples to see the transition.

Note

The gradient border is a progressive enhancement behind @supports (background-clip: border-area) (Safari 18.2+, Chrome/Edge 150+). Where it is unsupported the element keeps its flat proxy border — the documented fallback. On brands with no bespoke stops (everything except Lexus today) the gradient is instead derived from the brand’s secondary accent, so it stays a branded gradient. Switch the brand to Lexus to see the bespoke copper.

Gradient border

Add .tng-gradient-border to any element that already has a border width.

<div class="tng-gradient-border border-lg radius-md p-xl">
  Gradient border
</div>

Neutral

Gradient border

Contrast

Gradient border

Gradient fill

Add .tng-gradient-fill for a full-cover gradient background.

<button class="tng-button tng-gradient-fill">
  <span>Gradient button</span>
</button>

Neutral

Gradient button

Contrast

Gradient button

Keeping your own background

.tng-gradient-border clips the element’s own background-color to the border box, so setting background directly would be erased. A component that needs both a background and a gradient border hands its background to the utility through the --tng-gradient-background property, and applies the same property itself for brands where the utility is inert:

<div
  class="tng-gradient-border border-lg radius-md p-xl"
  style="
    --tng-gradient-background: var(
      --tng-color-background-neutral-subtle
    );
  "
>
  Background with border
</div>

Background with border

On a gradient brand the utility repaints background as the gradient (on the border ring) over --tng-gradient-background (in the interior); on a non-gradient brand the utility is inert and the element’s own background: var(--tng-gradient-background) paints. One declaration works on both.

Opting out

Use .tng-no-gradient-border or .tng-no-gradient-fill to suppress the gradient on an element that would otherwise receive it (e.g. an auto-applied Lexus button).

Properties

• --tng-gradient-background: the interior fill painted under a gradient border. Defaults to none (transparent interior). See keeping your own background.