Presets and exports

A preset is a finished set of gradient settings. The preset library groups them into collections, and any preset opens in the studio for tuning. You need a free account to tune, install or export. Pro presets need a Pro account.

Install a preset

1. Open a preset from the preset library and tune it.

2. Copy its install command and run it in your project:

   npx shadcn@latest add https://gradients.sh/r/c/<code>.json

3. Import the component it adds. The studio shows the exact import for yours:

   import { BlueHour } from "@/components/gradients/blue-hour";
   
   <BlueHour className="h-[560px]" />;

The command adds components/gradients/<name>.tsx, a small wrapper with your settings written in as props, plus the component and engine it needs. Edit the values there, or tune again and reinstall.

Saved gradients

A copied command is a fixed snapshot: each change gets a new link. Save a gradient instead and it keeps one command, https://gradients.sh/r/s/<id>.json, that installs whatever you saved last. Your saves are on your account page.

Anyone can run a command you share. Gradients built on a Pro component need the installer's own Pro account. Add @gradients-saved next to the Pro registries and install by name, so the CLI sends the token:

"@gradients-saved": {
  "url": "https://gradients.sh/r/s/{name}.json",
  "headers": { "Authorization": "Bearer ${GRADIENTS_TOKEN}" }
}

npx shadcn@latest add @gradients-saved/<id>

Export a PNG or MP4

Open the gradient in the editor, click Export, then pick a format and size.

Free exports allow PNG up to 1920px and 720p H.264 MP4 at 30 fps for up to 10 seconds. Pro allows PNG up to 16K, MP4 up to 6K or 4K60, and 1440p or 1080p at 120 fps where supported. Pick Size, Frame rate and Codec separately; the menu estimates the file size. AV1 and HEVC are available where supported. No export has a watermark. The pricing page lists the limits.