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

Dependencies: clsx tailwind-merge

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` Pale highlight color (hex).	`"#dce5df"`
`colorMid`	`string` Upper-left wash and diffused edge color (hex).	`"#83b9ad"`
`colorDark`	`string` Deep shadow color (hex).	`"#031419"`
`angle`	`number` Composition rotation in degrees, -360 to 360.	`0`
`position`	`number` Horizontal edge offset, -1 to 1.	`0`
`curve`	`number` Shadow edge curvature, -1 to 1.	`0.48`
`softness`	`number` Edge diffusion width, 0.01 to 1.	`0.13`
`scale`	`number` Composition zoom, 0.25 to 3.	`1`
`grain`	`number` Film grain intensity, 0 to 1. Zero removes the texture.	`0.32`
`grainSize`	`number` Grain size in CSS pixels, 0.5 to 4.	`1`
`seed`	`number` Reproducible texture seed, 0 to 100000.	`1`
`speed`	`number` Breathing speed, 0 to 2. At 1, the primary cycle lasts about 12 seconds. Zero pauses on the current frame.	`0`
`className`	`string` Container sizing, rounding, and styling.	—
`style`	`CSSProperties` Inline container 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

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

Prop

Type

Default

colorLight

string

Pale highlight color (hex).

"#dce5df"

colorMid

string

Upper-left wash and diffused edge color (hex).

"#83b9ad"

colorDark

string

Deep shadow color (hex).

"#031419"

angle

number

Composition rotation in degrees, -360 to 360.

0

position

number

Horizontal edge offset, -1 to 1.

0

curve

number

Shadow edge curvature, -1 to 1.

0.48

softness

number

Edge diffusion width, 0.01 to 1.

0.13

scale

number

Composition zoom, 0.25 to 3.

1

grain

number

Film grain intensity, 0 to 1. Zero removes the texture.

0.32

grainSize

number

Grain size in CSS pixels, 0.5 to 4.

1

seed

number

Reproducible texture seed, 0 to 100000.

1

speed

number

Breathing speed, 0 to 2. At 1, the primary cycle lasts about 12 seconds. Zero pauses on the current frame.

0

className

string

Container sizing, rounding, and styling.

—

style

CSSProperties

Inline container styles.

—