BackgroundsNew
Grain Gradient
A slow monochrome gradient of warped noise with film grain. A calm hero backdrop.
Customize
colorA
colorB
colorC
A Codearia component · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| colorA | string | "#0a0a0a" | Darkest tone. |
| colorB | string | "#3f3f3f" | Middle tone. |
| colorC | string | "#e5e5e5" | Brightest tone, for highlights. |
| speed | number | 1 | Speed. 0 stops the motion. |
| scale | number | 1 | Noise zoom. Higher means a finer pattern. |
| warp | number | 1 | Warp strength. 0 is a soft cloud, 2 is marble. |
| grain | number | 0.08 | Amount of film grain. |
| children | ReactNode | — | Content on top of the effect. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install ogl clsx tailwind-merge