Color Eclipse is an animated WebGL gradient in which rounded silver ribbons bend into an open diamond around a dark graphite centre while bands of light travel along them. Use it as a hero backdrop or a quiet focal panel behind a short headline. Size and orientation frame the shape, edge width and ribbon spread set how the ribbons are drawn, and bloom and exposure control the glow. Speed and timeline offset set the motion, and the palette is editable. The live editor and the HTML, React and Svelte exports share the same original renderer.
How this shader works
Color Eclipse bends rounded silver ribbons into an open diamond around a dark graphite centre, while bands of light travel along them. It works as a hero backdrop or a quiet focal panel behind a short headline. Size and Orientation frame the shape, Edge width and Ribbon spread decide how the ribbons are drawn, and Bloom and Exposure control the glow.
Tips
- Orientation rotates the diamond. Small angles keep it balanced behind centred text.
- Edge width sets how thick the ribbons are.
- Bloom controls the glow around the ribbons. Lower it for a crisp line drawing.
- Change Upper light, Lower light and Halo light to tint the bands.
Questions
How do I add an animated gradient behind a headline?
Open Color Eclipse, set Size so the diamond frames your headline and lower Exposure if the text needs more contrast. Export it as HTML, React or Svelte code.
Can I make it colourful instead of silver?
Yes. Change the three light colours in the Colors section. The background colour can change too.
Preview and customize in the browser. Exports require membership.