Grainy Background overlays a fine animated film grain texture on top of a slow-moving gradient, giving flat sections the weight of analog photography. Grain size, density, and animation speed are configurable, and the output is pure CSS so it scales to any container. Built with React and Tailwind CSS. Excellent for hero sections, marketing pages, and video-adjacent layouts that need texture.
Installation
Usage
import { GrainyBackground } from "@/components/ui/grainy-background";<div className="relative h-[500px] w-full overflow-hidden bg-transparent">
<div className="absolute inset-0">
<GrainyBackground
className="absolute inset-0"
colors={["#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"]}
/>
</div>
<div className="relative z-10 flex h-full items-center justify-center text-white">
<div className="p-4 text-center">Animated Background</div>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | Content to render on top of the gradient background. |
className | string | undefined | Additional CSS classes to apply to the container. Use this to control size, position, and z-index. |
style | React.CSSProperties | undefined | Inline styles to apply to the container. |
colors | string[] | DEFAULT_COLORS | Array of colors to use in the gradient pattern. |
speed | number | 1 | Speed factor for the gradient animation (higher = faster). |
grainType | string | "digital" | Type of grain texture effect: digital (sharp pixelated), plasma (organic flowing), scratches (linear streaks), paper (smooth textured), noise (fine random), dust (scattered particles). |
grainIntensity | number | 60 | Intensity of the grain effect (0-100). |
grainSize | number | 100 | Size of the grain particles. |
animationType | string | "mesh" | Animation pattern effect: flow (smooth directional), mesh (interconnected nodes), waves (rhythmic undulation), aurora (curtain-like movement), spiral (circular rotation), pulse (concentric expansion). |
animate | boolean | true | Enable or disable background animation. |
grainBlendMode | string | "soft-light" | CSS blend mode effect for grain layer: multiply (darkens), overlay (contrast), soft-light (gentle), hard-light (intense), screen (brightens), color-burn (dramatic), normal (standard). |