Docs·Animated Gradient

Animated Gradient

A beautiful, animated, and customizable WebGL gradient with noise capabilities.

Installation

pnpm dlx shadcn@latest add @componentry/animated-gradient

Usage

API Reference

PropertyTypeDefault
config

Preset or custom configuration for the gradient pattern.

GradientConfig—
noise

Options to apply a noise overlay.

NoiseConfig—
radius

Border radius applied to the container.

string"0px"
className

Additional CSS classes for styling.

string—
style

Additional inline CSS styles.

CSSProperties—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Animated

Gradient

import { AnimatedGradient } from "@/components/ui/animated-gradient"
<AnimatedGradient config={{ preset: "Aurora" }} />