static radial gradient
A radial gradient with up to ten colors, an off-center focal point, custom falloff curve, and optional radial distortion. Static by default.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { StaticRadialGradient } from '@devmischief/shaders-svelte';
<StaticRadialGradient
width={1280}
height={720}
colors={['#00bbff', '#00ffe1', '#ffffff', '#6bd8ff', '#ffe77a']}
colorBack="#191919"
radius={0.8}
focalDistance={0.99}
focalAngle={0}
falloff={0.24}
mixing={0.5}
distortion={0}
distortionShift={0}
distortionFreq={12}
grainMixer={0}
grainOverlay={0}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
speed={0}
fit="contain"
/>
Shader Props
14 | name | description | type | values |
|---|
| colors | Radial gradient colors (up to 10). | string[] | hex / rgb |
| colorBack | Background color shown beyond the gradient. | string | hex / rgba |
| radius | Size of the radial gradient shape. | number | 0 → 3 |
| focalDistance | Distance of the focal point from canvas center. | number | 0 → 3 |
| focalAngle | Direction of the focal point. Effective when focalDistance > 0. | number | 0 → 360° |
| falloff | Gradient decay curve. 0 = linear, negative compresses toward the rim, positive stretches outward. | number | −1 → 1 |
| mixing | Blend sharpness. 0 = hard stripes, 1 = smooth gradient. | number | 0 → 1 |
| distortion | Strength of radial distortion. | number | 0 → 1 |
| distortionShift | Radial distortion phase offset. Effective when distortion > 0. | number | −1 → 1 |
| distortionFreq | Radial distortion frequency. Higher values produce tighter wrinkles. | number | 0 → 20 |
| grainMixer | Grain distortion applied to color edges. | number | 0 → 1 |
| grainOverlay | Post-process black/white grain overlay. | number | 0 → 1 |
| speed | Animation speed. Default 0 — the gradient is static unless you set this above zero. | number | 0 → 3 |
| fit | How the gradient world is fit into the canvas. | string | 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 | — |