Grain Gradient
Installation
npm i @paper-design/shaders-react
Code
import { GrainGradient } from '@paper-design/shaders-react';
<GrainGradient
height={500}
colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33"]}
colorBack="#000000"
softness={0.5}
intensity={0.5}
noise={0.25}
shape="corners"
offsetX={0}
offsetY={0}
scale={1}
rotation={0}
speed={1}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colors | Up to 7 colors used in the gradient | string[] | Hex, RGB, or HSL color |
| colorBack | Background color | string | Hex, RGB, or HSL color |
| softness | Color transition sharpness (0 = hard edge, 1 = smooth gradient) | number | 0 to 1 |
| intensity | Distortion between color bands | number | 0 to 1 |
| noise | Grainy noise overlay | number | 0 to 1 |
| shape | Shape type | enum | | "wave" | "dots" | "truchet" | "corners" | "ripple" | "blob" | "sphere" |
| offsetX | Horizontal offset of the graphics center | number | -1 to 1 |
| offsetY | Vertical offset of the graphics center | number | -1 to 1 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.01 to 4 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
| speed | Animation speed | number | 0 to 2 |
Description
Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.