DocsAnimated 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

PropTypeDefault
configGradientConfig

Preset or custom configuration for the gradient pattern.

—
noiseNoiseConfig

Options to apply a noise overlay.

—
radiusstring

Border radius applied to the container.

"0px"
classNamestring

Additional CSS classes for styling.

—
styleCSSProperties

Additional inline CSS styles.

—

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
PreviousWheel CarouselNextAurora Flow

Animated

Gradient

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