Skip to main content

UI element

The glass panel kit

The glass this site is made of, as one CSS file.

By
Caleb and Ryan, the founders
Updated
August 28, 2026
Version
1.0, in the library
  • Claude Code
  • Cursor

The .glass-panel material from this site: the tint, the blur, the specular highlight, the rim, the lift on hover, the interactive and small variants, and the light and dark values, with the reasoning in comments. Drop it on a canvas with the two role tokens it reads and every surface you build wears the same glass. In the library because it is the easy part; the hard part is what you put on it.

Built, documented, running.

Part of the working library we deploy from on every engagement.

Bring this into a project

Runs on

  • Claude Code
  • Cursor

2 requirements and 3 install steps, below.

  • Complete and documented: the same files we run ourselves.
  • Deployed and tuned to your stack as part of an engagement.

The file

Draft excerpt
/* The glass. One material for every input bar, button and card. */.glass-panel {  --glass-tint: 38%;  --glass-blur: 28px;  position: relative;  background: color-mix(in srgb, var(--surface) var(--glass-tint), transparent);  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);  box-shadow:    inset 0 1px 1px rgb(255 255 255 / 0.55),    0 6px 16px color-mix(in srgb, var(--text) 8%, transparent);}

What is inside

4 items. Includes deployment guide.

  • glass.cssThe material: .glass-panel and its variants, both themes, every value commented.
  • tokens.cssThe two role tokens the glass reads, with the light and dark values.
  • GUIDE.mdWhere the glass is allowed (inputs, buttons, cards) and where it is not.
  • example.htmlA page of every variant, to compare against yours.

Who it is for

  • You liked the surfaces on this site and want the same material on yours without reverse-engineering it.
  • You are building a product page and want one panel treatment instead of five.
  • You want to see how a small design system is written before you commission one.

Requirements

  • Any site with a CSS file
  • Two colour tokens for your ground and your ink

Install

  1. 01

    Copy glass.css and tokens.css into your styles and import them after your reset.

  2. 02

    Set the two tokens to your ground and your ink; the glass derives the rest.

  3. 03

    Add .glass-panel to a surface. Compare it against example.html.

Where this sits

  1. This system

    The glass panel kit

    In the library, running.

  2. Pairs with

    The scroll scene shell

    The mechanism under every opening scene on this site: a sticky stage scrubbed by scroll, with the static fallback built in.

  3. In your stack

    Deployed on an engagement

    The audit finds which system earns its place first; we install and tune it around how you work.

Questions

Is this the exact CSS from your site?
Yes, with the site-specific overrides removed and the reasoning kept in comments.
Does it need Tailwind?
No. Plain CSS with two custom properties.
Can I use it on a client project?
Yes. The license covers your own and your clients' work; it does not cover reselling the file.
What is the next step up?
The scroll scene shell, which is the mechanism the site's opening scenes run on.

Changelog

  1. August 28, 2026In the library. Version 1.0 runs in our own operation.

Related

  1. CLAUDE.md starter

    Company brain starter

    Give an agent the shape of your company before it writes a word

    Works with Claude Code, Cursor.

    Built and running
  2. Featured

    Skill

    Code review skill with a pattern database

    A review pass that knows your framework's failure patterns before it reads your diff

    Works with Claude Code, Cursor.

    Built and running

  3. UI element

    The scroll scene shell

    A sticky scene scrubbed by scroll, with the static fallback built in

    Works with Claude Code, Cursor.

    Built and running