Components

• Mesh Gradient

  Soft colour blobs drifting into each other.

• Grain Gradient

  A grainy, out-of-focus blend of saturated colour.

• Aurora

  Vertical light curtains folding over a night sky.

• Waves

  Layered bands of colour rolling past each other.

• Radial Glow

  A warm glow rising from the bottom edge.

• Linear Flow

  A linear blend whose angle and colour stops drift slowly.

• Live.
  Gradient Text

  Real, selectable text filled with a live gradient.

• Ship it live
  Gradient Border

  An animated gradient border around any content. The inside stays transparent.

• Get started
  Gradient Button

  A button with a live gradient fill and hover, press, focus and disabled states.

• Your headline

  Hero Background

  A full-bleed hero section on a live gradient that fades into the page.

• Section Fade

  A section whose live gradient fades out at its edges.

• Pro plan

  Every preset, up to 16K export

  Gradient Card

  A card on a live gradient, with a scrim that keeps white text legible.

Every component takes the same gradient props, such as colors, speed and grain, on top of its own. Each page's props table lists them with that component's defaults.

Install by name

Each page has a one-line install command. To install by name instead, add the registry to components.json once:

{
  "registries": {
    "@gradients.sh": "https://gradients.sh/r/{name}.json"
  }
}

Then run npx shadcn@latest add @gradients/<name>.