# Backlit Glass Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A WebGPU wall of glass tiles for React: soft lines of light drift behind it, and each tile bends them into a glowing curve toward its corner. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Backlit Glass builds a wall of square glass tiles with a few soft lines of light behind it, drifting slowly and rising and falling in long waves. Each tile is thick toward its lower-left corner and bends what lies behind toward it, so a line of light crossing a tile shows as a glowing curve along its floor and up its side, and the wall reads as glass, not a grid. The joints catch a fine double edge. Move the pointer and a soft light comes up behind the tiles under it. ## Choose it for Sit behind an architectural, interior or product page that wants texture without busyness: small tiles for a fine screen, large ones for a bold wall. ## Limits Backlit Glass refracts its own light, not your page or images behind the canvas. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/backlit-glass/edit?look=default) ## Install Backlit Glass is part of Aperveil Shaders and Aperveil Pro, coming soon. Its live demo is open; installation and downloads open in a later release. Free shaders install today: see the [Aperveil integration guide](https://www.aperveil.com/docs). ## Controls - Light (`lightColor`, color): The light behind the tiles. - Bright light (`hotColor`, color): Where the light is strongest. - Edges (`edgeColor`, color): The fine edges round each tile. - Background (`background`, color): The dark ground. - Tile size (`tile`, slider): How large the tiles are, against the frame height. - Joints (`joint`, slider): The width of the dark joints between tiles. - Bend (`bend`, slider): How strongly each tile bends the light toward its corner. - Edges (`edges`, slider): How bright the fine tile edges are. - Light lines (`lines`, slider): How many lines of light drift behind the wall. - Brightness (`glow`, slider): How bright the light behind the tiles is. - Speed (`speed`, slider): How fast the light drifts and waves. - Pointer response (`interaction`, slider): How bright the pointer's light is. - Opacity (`opacity`, slider): Opacity of the whole effect, including its background. - Background opacity (`backgroundOpacity`, slider): Fade the background on its own, for a transparent overlay. ## Compatibility WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. ## Performance 0.59 ms GPU timestamp median; p95 0.786 ms. 1440x900 @ dpr 1.5; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-19. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee. ## Questions ### Can I change the size of the tiles? Yes. Tile size sets them from a fine screen to a bold wall, Joints the width of the dark joints and Bend how strongly each tile bends the light. ### How much light moves behind the wall? Light lines sets how many lines drift behind it, Brightness how bright they are and Speed how fast they drift. ### What does the pointer do? It brings a soft light behind the tiles under it; Pointer response sets how bright. ### What happens without WebGPU? This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component. ### Can I use this shader commercially? Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## License Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## Related shaders - [Glass Flutes](https://www.aperveil.com/shaders/glass-flutes) - [Frost Glass](https://www.aperveil.com/shaders/frost-glass) - [Hex Tiles](https://www.aperveil.com/shaders/hex-tiles)