Skip to content
Pro · Coming soon for Aperveil 1.0 WebGPU shader

Backlit Glass: Light behind a wall of glass.

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.

Open editorMeet the surface

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.

Color Looks

A surface, not a screenshot.
Pro · Coming soon for Aperveil 1.0React · Vue · HTML · WordPress · FramerRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Backlit Glass.

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.

Backlit Glass refracts its own light, not your page or images behind the canvas.

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.

01

Tile size

How large the tiles are, against the frame height.

02

Joints

The width of the dark joints between tiles.

03

Bend

How strongly each tile bends the light toward its corner.

04

Edges

How bright the fine tile edges are.

Color Looks preserve these settings. Open the editor for all 14 controls.

APERVEIL PRO

Coming soon.

The live demo is open above and in the editor. Editing its settings and downloading it open with Aperveil Pro in a later release. Free shaders and blocks are available now.

Explore shaders
Markdown guide

THE SURFACE IN CONTEXT

Made for a real interface.

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.

Backlit Glass used behind an example interface
ATRIUMExample composition

Architecture & interiors

Light, held in glass.

An illustrative studio page with the glass wall behind its introduction.

Projects

Forty

Since

2009

Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Try this surface in the editor

A FEW USEFUL DETAILS

Before you ship.

What this surface does, where it fits, and where it stops.

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.

Light lines sets how many lines drift behind it, Brightness how bright they are and Speed how fast they drift.

It brings a soft light behind the tiles under it; Pointer response sets how bright.

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.

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.

ANOTHER WAY TO SEE IT

All grids & tiles shaders
Glass Flutes shader previewGlass FlutesFrost Glass shader previewFrost GlassHex Tiles shader previewHex Tiles

YOUR COLORS. YOUR CONTEXT.

Make Backlit Glass yours.

Open editor