---
url: /api/css/ai-gradient.md
---
# CSS: ai-gradient

`.--background-ai-horizontal` — AI-accent gradient helpers intended for custom surfaces, not the shared InstUI contract.

**Source:** [index.ts](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/utilities/ai-gradient/index.ts)

## Usage

```css
@import "@pantoken/plugin-custom-components/custom-components.css";
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.--background-ai` | Paint the element background with the shared AI gradient. |
| `.--background-ai-horizontal` | Direction-aware horizontal variant. |
| `.--border-color-ai` | A transparent border framed by the shared AI gradient. |
| `.--border-color-ai-horizontal` | Direction-aware horizontal variant. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-border-width-sm` | `<length>` | `0.0625rem` |
| `--instui-color-background-base` | `<color>` | `light-dark(#ffffff, #10141A)` |
| `--instui-color-stroke-ai-bottom-gradient` | `<color>` | `light-dark(#00828E, #04A4B7)` |
| `--instui-color-stroke-ai-top-gradient` | `<color>` | `light-dark(#9E58BD, #B680CC)` |