Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Gradient
description: Decorative masked gradient overlays for sections, cards, and media.
---

```astro live props={{ name: 'gradient' }}
---
import { Gradient } from "@/components/ui/gradient"
---

<div class="bg-card relative isolate h-64 overflow-hidden rounded-lg border">
  <Gradient class="opacity-20" />
  <div class="relative z-10 flex h-full items-end p-6">
    <div>
      <p class="text-sm font-medium">Section background</p>
      <p class="text-muted-foreground mt-1 text-sm">
        A soft radial gradient anchored to the bottom edge.
      </p>
    </div>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/gradient
```

## Usage

```ts
import { Gradient } from "@/components/ui/gradient"
```

```astro
<div class="relative overflow-hidden">
  <Gradient />
  <div class="relative z-10">
    <!-- Content -->
  </div>
</div>
```

The component renders an absolutely positioned decorative layer. Place it in a
relative parent and keep foreground content above it with normal stacking.

## Examples

### Linear

Use `variant="linear"` for edge fades and image overlays.

```astro live
---
import { Gradient } from "@/components/ui/gradient"
---

<div class="bg-card relative isolate h-56 overflow-hidden rounded-lg border">
  <Gradient
    variant="linear"
    direction="top"
    class="bg-background opacity-90 [--gradient-stops:black,transparent_70%]"
  />
  <div class="absolute inset-x-0 bottom-0 z-10 p-6">
    <p class="text-sm font-medium">Linear overlay</p>
    <p class="text-muted-foreground mt-1 text-sm">
      Useful when content needs more contrast over media.
    </p>
  </div>
</div>
```

### Direction

Control where the gradient is anchored with `direction`.

```astro live
---
import { Gradient } from "@/components/ui/gradient"
---

<div class="grid gap-4 sm:grid-cols-2">
  <div class="bg-card relative isolate h-44 overflow-hidden rounded-lg border">
    <Gradient direction="left" class="opacity-25" />
    <div class="relative z-10 p-5 text-sm font-medium">Left</div>
  </div>
  <div class="bg-card relative isolate h-44 overflow-hidden rounded-lg border">
    <Gradient direction="right" class="opacity-25" />
    <div class="relative z-10 p-5 text-sm font-medium">Right</div>
  </div>
</div>
```

### Custom Stops

Override `--gradient-stops` and background color to shape the mask.

```astro live
---
import { Gradient } from "@/components/ui/gradient"
---

<div class="bg-card relative isolate h-56 overflow-hidden rounded-lg border">
  <Gradient
    direction="center"
    class="bg-accent opacity-20 [--gradient-stops:black,transparent_55%]"
  />
  <div
    class="relative z-10 flex h-full items-center justify-center p-6 text-sm font-medium"
  >
    Center glow
  </div>
</div>
```

## API Reference

### Gradient

Use `Gradient` to add a non-interactive decorative gradient layer.

| Prop        | Type                                                 | Default    |
| ----------- | ---------------------------------------------------- | ---------- |
| `variant`   | `"radial" \| "linear"`                               | `"radial"` |
| `direction` | `"left" \| "right" \| "top" \| "bottom" \| "center"` | `"bottom"` |
| `class`     | `string`                                             |            |

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/gradient) for more information on props.