Skip to main content
The Grain Gradient shader creates multi-color gradients with grainy, noise-textured distortion available in 7 different animated abstract forms. Perfect for creating organic, textured backgrounds with a film-like quality.

​
Usage

import { GrainGradient } from '@paper-design/shaders-react';

function App() {
  return (
    <GrainGradient
      colorBack="#000000"
      colors={['#7300ff', '#eba8ff', '#00bfff', '#2a00ff']}
      shape="corners"
      softness={0.5}
      intensity={0.5}
      noise={0.25}
      speed={1}
    />
  );
}

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format.
​
colors
string[]
default:"['#7300ff', '#eba8ff', '#00bfff', '#2a00ff']"
Array of gradient colors in hex format. Supports up to 7 colors.
​
shape
string
default:"'corners'"
Shape type for the gradient animation. Available options:
  • 'wave' - Flowing sine wave pattern
  • 'dots' - Animated grid of dots
  • 'truchet' - Truchet tile pattern
  • 'corners' - Corner-based organic shapes
  • 'ripple' - Concentric ripple effect
  • 'blob' - Moving blob shapes
  • 'sphere' - 3D sphere with lighting
​
softness
number
default:"0.5"
Color transition sharpness (0 to 1). 0 = hard edge, 1 = smooth gradient.
​
intensity
number
default:"0.5"
Distortion between color bands (0 to 1). Controls how much the grain affects color boundaries.
​
noise
number
default:"0.25"
Grainy noise overlay strength (0 to 1). Adds texture throughout the gradient.
​
speed
number
default:"1"
Animation speed multiplier.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"1"
Overall zoom level (0.01 to 4).
​
rotation
number
default:"0"
Rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset (-1 to 1).

​
Presets

​
Default (Corners)

<GrainGradient
  colorBack="#000000"
  colors={['#7300ff', '#eba8ff', '#00bfff', '#2a00ff']}
  shape="corners"
  softness={0.5}
  intensity={0.5}
  noise={0.25}
  speed={1}
/>

​
Wave

<GrainGradient
  colorBack="#000a0f"
  colors={['#c4730b', '#bdad5f', '#d8ccc7']}
  shape="wave"
  softness={0.7}
  intensity={0.15}
  noise={0.5}
  speed={1}
/>

​
Dots

<GrainGradient
  colorBack="#0a0000"
  colors={['#6f0000', '#0080ff', '#f2ebc9', '#33cc33']}
  shape="dots"
  softness={1}
  intensity={1}
  noise={0.7}
  scale={0.6}
  speed={1}
/>

​
Truchet

<GrainGradient
  colorBack="#0a0000"
  colors={['#6f2200', '#eabb7c', '#39b523']}
  shape="truchet"
  softness={0}
  intensity={0.2}
  noise={1}
  speed={1}
/>

​
Ripple

<GrainGradient
  colorBack="#140a00"
  colors={['#6f2d00', '#88ddae', '#2c0b1d']}
  shape="ripple"
  softness={0.5}
  intensity={0.5}
  noise={0.5}
  scale={0.5}
  speed={1}
/>

​
Blob

<GrainGradient
  colorBack="#0f0e18"
  colors={['#3e6172', '#a49b74', '#568c50']}
  shape="blob"
  softness={0}
  intensity={0.15}
  noise={0.5}
  scale={1.3}
  speed={1}
/>

​
Technical Details

  • Max Colors: 7
  • Shapes: 7 different animated patterns
  • Noise: Combines simplex noise with FBM (Fractal Brownian Motion)
  • Grain: Uses texture-based randomizer for consistent grain patterns
  • Coordinates: Uses both pattern UV and object UV depending on shape
  • Special Note: Grains are calculated using screen coordinates, so they don’t scale with the shader’s scale/fit properties
The shader generates animated shapes using various algorithms (sine waves, procedural patterns, blob motion), applies multi-octave noise for grain texture, and maps colors with configurable softness and distortion.