Skip to main content
The Static Radial Gradient creates sophisticated radial gradients with up to 10 colors, featuring focal point controls, shape distortion patterns, and grain effects. Perfect for creating dynamic focal points, spotlight effects, and organic radial compositions.

​
Usage

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

function App() {
  return (
    <StaticRadialGradient
      colorBack="#000000"
      colors={['#00bbff', '#00ffe1', '#ffffff']}
      radius={0.8}
      focalDistance={0.99}
      focalAngle={0}
      falloff={0.24}
      mixing={0.5}
      distortion={0}
    />
  );
}

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format. Visible outside the gradient radius.
​
colors
string[]
default:"['#00bbff', '#00ffe1', '#ffffff']"
Array of gradient colors in hex format. Supports up to 10 colors. Colors radiate from the focal point outward.
​
radius
number
default:"0.8"
Size of the radial shape (0 to 3). Controls the overall size of the gradient.
​
focalDistance
number
default:"0.99"
Distance of the focal point from center (0 to 3). 0 creates a centered radial, higher values shift the focal point.
​
focalAngle
number
default:"0"
Angle of the focal point in degrees (0 to 360). Effective when focalDistance > 0.
​
falloff
number
default:"0.24"
Gradient decay rate (-1 to 1). 0 = linear gradient, positive values create faster falloff, negative creates slower falloff.
​
mixing
number
default:"0.5"
Blending behavior between colors (0 to 1). 0 = hard stripes, 1 = smooth gradient.
​
distortion
number
default:"0"
Strength of radial distortion pattern (0 to 1). Creates wave-like ripples in the gradient.
​
distortionShift
number
default:"0"
Radial distortion offset (-1 to 1). Effective when distortion > 0. Shifts the distortion pattern.
​
distortionFreq
number
default:"12"
Radial distortion frequency (0 to 20). Effective when distortion > 0. Controls the number of waves.
​
grainMixer
number
default:"0"
Strength of grain distortion applied to shape edges (0 to 1).
​
grainOverlay
number
default:"0"
Post-processing black/white grain overlay (0 to 1).
​
speed
number
default:"0"
Animation speed multiplier. Default is 0 for static appearance.

​
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).

​
Presets

​
Default

<StaticRadialGradient
  colorBack="#000000"
  colors={['#00bbff', '#00ffe1', '#ffffff']}
  radius={0.8}
  focalDistance={0.99}
  focalAngle={0}
  falloff={0.24}
  mixing={0.5}
/>

​
Lo-Fi

<StaticRadialGradient
  colorBack="#2e1f27"
  colors={['#d72638', '#3f88c5', '#f49d37']}
  radius={1}
  focalDistance={0}
  falloff={0.9}
  mixing={0.7}
  grainMixer={1}
  grainOverlay={0.5}
/>

​
Cross Section

<StaticRadialGradient
  colorBack="#3d348b"
  colors={['#7678ed', '#f7b801', '#f18701', '#37a066']}
  radius={1}
  focalDistance={0}
  falloff={0}
  mixing={0}
  distortion={1}
  distortionFreq={12}
/>

​
Radial

<StaticRadialGradient
  colorBack="#264653"
  colors={['#9c2b2b', '#f4a261', '#ffffff']}
  radius={1}
  focalDistance={0}
  falloff={0}
  mixing={1}
/>

​
Technical Details

  • Max Colors: 10
  • Animation: Designed for static use (speed=0 by default)
  • Focal Point: Ray-tracing algorithm for accurate focal point rendering
  • Distortion: Sine/cosine wave patterns at variable frequencies
  • Blending: Advanced mixing modes with power curve adjustments
  • Coordinates: Uses object UV coordinates scaled by 2
The shader uses ray-circle intersection math to create accurate radial gradients from an offset focal point, applies optional sinusoidal distortion, and blends colors with configurable sharpness and power curves.