grain gradient
A multi-colour gradient with grainy texture, available in seven animated abstract forms — from soft blobs to sharp corners to ripples and spheres.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { GrainGradient } from '@devmischief/shaders-svelte';
<GrainGradient
width={1280}
height={720}
colors={['#3a86ff', '#06d6a0', '#ffd166', '#ef476f']}
colorBack="#000000"
shape="corners"
softness={0.5}
intensity={0.5}
noise={0.25}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="contain"
/>
Shader Props
8 | name | description | type | values |
|---|
| colors | Gradient colors (up to 7). | string[] | hex / rgb |
| colorBack | Background color shown beyond the gradient. | string | hex / rgba |
| shape | Underlying gradient shape. | string | wave · dots · truchet · corners · ripple · blob · sphere |
| softness | Color transition sharpness. 0 = hard edge, 1 = smooth gradient. | number | 0 → 1 |
| intensity | Distortion power between color bands. | number | 0 → 1 |
| noise | Strength of the grainy noise overlay. | number | 0 → 1 |
| speed | Animation speed of the gradient. | number | 0 → 3 |
| fit | How the gradient world is fit into the canvas. | string | none · cover · contain |
Common Props
6 | name | description | type | values |
|---|
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| worldWidth | Virtual width of the graphic before it's scaled to fit the canvas. | number | — |
| worldHeight | Virtual height of the graphic before it's scaled to fit the canvas. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |