Silver and soft-white reflections travel across opening glass sheets on HorizonX graphite. Adjust speed, size, glass curvature, contrast, glow and fine grain, or replace the three palette colors. Use slower motion and lower glow behind text. The canvas fills the preview and respects reduced-motion preferences.
How this shader works
Floating Glass shows sheets of silver glass opening and folding in space, with bright curved edges, graphite cavities and a fine frosted grain. Reflections travel across the glass as it moves. Everything is generated in code. Glass curvature and Glass contrast shape the sheets, Glow sets the edge light, and three colours set the silver, the light and the graphite background.
Tips
- For a background behind text, lower Speed and Glow so the glass does not compete with the words.
- Glass curvature controls how much the sheets bend.
- Frosted grain adds a fine texture to the glass. Set it to 0 for a clean surface.
- Swap Silver and Light for coloured tones to tint the glass.
Questions
How do I make a frosted glass background?
Open Floating Glass and raise Frosted grain for a frosted surface. Set Glass contrast and Glow for the strength of the edges, then export it as an HTML file or a React or Svelte component.
Can I use it as a video?
Yes. It can be exported as an MP4 video as well as code.
Preview and customize in the browser. Exports require membership.