Moving light fields illuminate a fine dot grid in HorizonX ink, graphite, silver and white.
About this shader
Gradient Dots lights a regular dot grid with moving colour fields. It works as a dotted hero background or a subtle animated panel. Dot spacing sets the grid density and dot radius sets the weight of each mark. Flow speed and shimmer control movement; hue, saturation and brightness change the overall colour treatment. Edge fade softens the boundary. For small panels, start with wider spacing so the grid remains legible instead of becoming visual noise.
How this shader works
Gradient Dots lights a regular dot grid with moving colour fields. It works as a dotted hero background or a subtle animated panel. Dot spacing sets the grid density and Dot radius sets the weight of each dot. Flow speed and Shimmer control movement, and Hue, Saturation and Brightness change the overall colour treatment. Edge fade softens the boundary.
Tips
- For small panels, start with wider Dot spacing so the grid stays readable.
- Shimmer is 0 by default. Raise it to make the dots flicker.
- Gradient angle turns the direction of the colour fields.
- Edge fade blends the grid into the page instead of ending at a hard edge.
Questions
How do I make an animated dot grid background?
Open Gradient Dots, set Dot spacing and Dot radius, and choose the five colours. Export it as an HTML file, a React or Svelte component or an MP4 video.
Can I use brand colours?
Yes. The background, two light fields, the shadow field and the silver field are all editable.
Preview and customize in the browser. Exports require membership.
Shader formats and usage guide Gradients · All shaders
Animation respects your device’s reduced-motion preference.