Example 1: Image Fallback
This container uses data-webgl-fallback on an image.
The image is visible by default (in Webflow Designer) and automatically hidden when WebGL loads.
How it works:
• WebGL supported → Image hidden, WebGL effect shows
• WebGL not supported → Image stays visible
• In Webflow Designer → Image always visible for design
• WebGL supported → Image hidden, WebGL effect shows
• WebGL not supported → Image stays visible
• In Webflow Designer → Image always visible for design
Example 2: Custom Fallback Design
You can design any custom fallback in Webflow using divs, text, images, etc.
All elements with data-webgl-fallback will be managed automatically.
⚠️ WebGL Not Supported
Your device doesn't support WebGL.
This is the fallback you designed in Webflow!
Webflow Setup:
1. Add
2. Add
3. Design fallback elements normally in Webflow
4. Script handles show/hide automatically
1. Add
data-webgl-canvas="effect-name" to container2. Add
data-webgl-fallback to fallback elements3. Design fallback elements normally in Webflow
4. Script handles show/hide automatically