Grain Gradient

A softly curved color field with fine film grain. Breathing light and flowing shadows, with customizable palette, composition, texture, and motion.

Installation

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

Usage

Set a height on the component or its parent. This decorative surface is hidden from assistive technology; place any content in a separate layer. Colors accept three- or six-digit hex values and stay the same in either theme. WebGL is optional: a CSS gradient appears when unavailable. Motion pauses offscreen, in hidden tabs, and with reduced motion. The default gently breathes; set speed to zero to pause.

import { GrainGradient } from "@/components/ui/grain-gradient"

<GrainGradient
  colorLight="#dce5df"
  colorMid="#83b9ad"
  colorDark="#031419"
  speed={1}
  grain={0.32}
  className="h-[560px] rounded-2xl"
/>

API Reference

Prop	Type	Default
`colorLight`	`string`	`"#dce5df"`
`colorMid`	`string`	`"#83b9ad"`
`colorDark`	`string`	`"#031419"`
`angle`	`number`	`0`
`position`	`number`	`0`
`curve`	`number`	`0.48`
`softness`	`number`	`0.13`
`scale`	`number`	`1`
`grain`	`number`	`0.32`
`grainSize`	`number`	`1`
`seed`	`number`	`1`
`speed`	`number`	`0`
`className`	`string`	—
`style`	`CSSProperties`	—

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