Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

Static Radial Gradient renders a radial gradient from a focal point outward through up to 10 colors. The focal point can be offset from the center of the shape, creating conic-like gradients. A distortion parameter adds radial petal or ripple patterns along the gradient boundary, and grain controls add noise texture on top.

​
Usage

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

export default function Example() {
  return (
    <StaticRadialGradient
      colorBack="#000000"
      colors={['#00bbff', '#00ffe1', '#ffffff']}
      radius={0.8}
      focalDistance={0.99}
      focalAngle={0}
      falloff={0.24}
      mixing={0.5}
      distortion={0}
      distortionShift={0}
      distortionFreq={12}
      grainMixer={0}
      grainOverlay={0}
      speed={0}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"\"#000000\""
Background color shown outside the gradient shape. Accepts any CSS color string.
​
colors
string[]
default:"[\"#00bbff\", \"#00ffe1\", \"#ffffff\"]"
Array of CSS color strings blended from the focal point outward. Accepts up to 10 colors.
​
radius
number
default:"0.8"
Size of the gradient shape. Range 0 to 3.
​
focalDistance
number
default:"0.99"
Distance of the focal point from the center of the shape. A value of 0 places the focal point at the center (standard radial gradient). Range 0 to 3.
​
focalAngle
number
default:"0"
Angle of the focal point in degrees. Only effective when focalDistance is greater than 0. Range 0 to 360.
​
falloff
number
default:"0.24"
Controls the gradient decay curve. 0 produces a linear gradient. Positive values accelerate the falloff; negative values slow it. Range -1 to 1.
​
mixing
number
default:"0.5"
Blending behavior between colors. 0 produces hard stripes, 1 produces a smooth gradient. Range 0 to 1.
​
distortion
number
default:"0"
Strength of radial boundary distortion. Creates petal or ripple patterns along color edges. Range 0 to 1.
​
distortionShift
number
default:"0"
Radial offset of the distortion effect. Only effective when distortion is greater than 0. Range -1 to 1.
​
distortionFreq
number
default:"12"
Frequency (number of petals or ripple peaks) of the distortion. Only effective when distortion is greater than 0. Range 0 to 20.
​
grainMixer
number
default:"0"
Strength of grain distortion applied to color edges. Range 0 to 1.
​
grainOverlay
number
default:"0"
Post-processing black/white film grain overlay blended on top of the final color. Range 0 to 1.
​
speed
number
default:"0"
Animation speed multiplier. The default is 0 (static).
​
frame
number
default:"0"
Starting animation frame in milliseconds.

​
Presets

NameDescription
defaultPresetCyan-to-white on black with an offset focal point giving a cone-like shape.
loFiPresetThree warm colors on dark purple with heavy grain for a lo-fi aesthetic.
crossSectionPresetFour-color radial with maximum distortion creating a cross-section look.
radialPresetSmooth sunset radial gradient from center with no distortion.
Import presets from @paper-design/shaders-react: 
import { staticRadialGradientPresets } from '@paper-design/shaders-react';

​
Sizing props

Static Radial Gradient also accepts all ShaderSizingParams (fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, worldHeight). See Sizing and fit for details.