Gradient

Quarantine

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.

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>

Default

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>

Default

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.