Installation

Include one CSS file – done. Optionally add a theme override for custom brand colors.

Design Tokens

All visual values are controlled via CSS Custom Properties.

Color Palette

Glass Surfaces

Spacing & Radii

Density

Theming (Light / Dark)

The theme is controlled via data-theme on the <html> element.

Right to left

Since 1.20.0 the components follow the writing direction. Set dir="rtl" on <html> or on any container: paddings, insets and borders are logical properties, so labels and hints, the search icon, list dividers, popover anchors, tab badges, modal actions, the toast’s close button and the alignment of accordion, list, table and prose all mirror. Where two values have to move together — the select’s chevron and the room kept for it, the toggle’s thumb and its travel, the progress fill’s gradient — the rule sits under :dir(rtl): Chrome and Edge from 120, Safari from 16.4, Firefox from 49. An older browser keeps those parts left to right instead of tearing them apart.

Printing

Print dialogs leave out background graphics by default, and some states are drawn with a background only. Since 1.21.1 those parts keep their colours on paper — the checked box and its tick, the chosen radio, the toggle’s track, the progress fill, the current step, the chosen day of date strip and calendar, the slider thumb and the tone dots — while the rest of the page prints economically. Nothing to set. A dark page prints its light text and surfaces on white paper; a page meant for printing switches to the light theme for it:

Density (Compact)

Admin screens, desktop layouts and narrow forms want denser controls. Since 1.21.0 the control sizes are density tokens, and data-density="compact" on the <html> element swaps in a smaller set: fields and buttons 40px high instead of 52 and 56, smaller toggles, checkboxes and radios, denser list rows and modal actions. Colours, type and spacing stay as they are. Without the attribute every control keeps the size it has always had.

The preview sets the attribute on its right column. On a page it belongs on <html>, next to data-theme: an element further down that carries data-theme="dark" re-declares the default sizes.

The toggle's thumb inset and travel — in either writing direction — and the first-line alignment of toggle, checkbox and radio are derived from the tokens, so any size a project sets stays aligned. The rules read every size with today's value as fallback, like --gl-modal-max-width, so a page whose token sheet predates them keeps the old sizes.

Background

The glass effect requires a colored background.

Navigation Bar

Pill-Buttons

Round icon buttons for navigation and actions.

Tab-Bar

Fixed bottom navigation with glass background and optional badge.

Tab-Bar – Floating

Pill-shaped, centered, floating variant inspired by iOS 26 Liquid Glass. Pair with an optional .glass-tab-bar__accessory capsule (e.g. search, compose) — sits next to the bar with its own glass material. The active tab gets a soft radial Spotlight halo instead of the underline dot.

Accessory accent variants

Add --accent, --success, or --error to highlight the accessory with a colored capsule (filled background, white icon).

Title

Card

Buttons

A disabled button — disabled, or aria-disabled="true" on an a.glass-btn, which cannot be disabled — is dimmed, shows the not-allowed cursor and no longer lifts on hover (since 1.21.2; before, it looked exactly like an enabled one). The link still navigates unless the page stops it. The same holds for pill, tab-bar accessory, modal actions, interactive list rows and the calendar’s month arrows; toggle, checkbox and radio dim their control and label, select, textarea and range dim like the input.

Badge

Variants: --primary, --success, --warning (since 1.18.0) and --error. Each draws its fill, border and text from the state colour’s -surface, -border and -on-surface tokens, so re-colouring the state colour moves the whole badge.

Chips

A badge doubles as a filter chip. --interactive carries the affordance — pointer cursor, hover tint, focus ring — and --selected says which chip is on. Use a real <button> and put the state in aria-pressed, so the row works by keyboard and is announced as a toggle.

--selected deepens the colour the badge already carries instead of overruling it, so a status chip stays in its own colour when it is picked.

Avatar

Divider

Status Notice

List

Grouped settings-style container for stacked rows. Items support a leading icon, title + optional subtitle, and a trailing element (chevron, value, button). Dividers between items are drawn automatically — no extra markup needed.

Settings style (icon + title + subtitle + trailing)

Compact menu (centered text, no icons)

Grouped sections with large icons

Class reference

Dividers between rows are rendered automatically via ::after. Items with a leading icon get an icon-aligned inset; items without — no __leading, or one carrying the hidden attribute (since 1.20.0) — get the standard padding inset. A hidden __leading or __trailing takes no room. The last item never has a divider. SVG icon convention: 24px for leading, 18px for trailing, stroke: currentColor, stroke-width: 2.

Modal

Centered dialog with blur overlay. Visibility is controlled via the .is-active class on the overlay element — toggling it requires a tiny bit of JavaScript.

Class reference

Note: the .is-active class belongs on the .glass-modal-overlay, not on .glass-modal itself. The overlay handles the fullscreen backdrop, and its :is-active state triggers both the backdrop fade-in and the inner dialog's scale-up animation.

As a native dialog

Since 1.20.0 the overlay may also be a <dialog>. Opened with showModal() it lies in the top layer; the page behind it is inert for the pointer, the keyboard and screen readers; focus moves in and goes back to where it came from on closing; Escape closes it. GlassKit undoes the dialog’s own box and backdrop, so it looks exactly like the <div> overlay. Name it by its title with aria-labelledby. GlassKit Elements’ <glk-modal> works this way.

While a modal dialog is open, everything outside it is inert — a toast shown then is neither clickable nor announced. Give feedback inside the dialog, or close it first.

Width

The panel is at most --gl-modal-max-width wide — 340 px unless set (since 1.20.0; before, a literal). A dialog with a form or a table can take more:

Toast

Visible via .is-visible. Variants: --success, --error, --warning.

With an action (since 1.19.0): __action is a small pill in the toast’s own tone — primary on a plain toast, the state colour on a variant — and __close the × at the end; give it an aria-label. Both have a 44 px hit area. A toast with an action may grow to 480 px, the text wraps, the buttons never shrink; it should stay until one of them is used. The toast sits --gl-toast-top from the top (56 px unless set) — set it below your header, and add env(safe-area-inset-top) with viewport-fit=cover. It stays at the top also with an action: one place for every toast.

Popover

Anchored dropdown / menu container. Wrap a trigger and a .glass-popover in a .glass-popover-anchor. Visibility is controlled via the .is-open class — toggling it requires a tiny bit of JavaScript.

Class reference

Note: name your toggle function anything except togglePopover — that name collides with the native HTMLElement.togglePopover() method from the HTML Popover API and inline onclick handlers will throw a NotSupportedError.

Input

Date and time fields — type="date", time, datetime-local, month — take the same class. They drop the native appearance (since 1.17.0): iOS drew them wider than their column, an empty one narrower than a filled one, with the value centred. Now they sit in their column like every other field, the value at the start; the native picker still opens.

Prefix and suffix

An icon, a currency, a unit or a button inside the field’s box (since 1.22.0): wrap the input in .glass-input-wrap and put __prefix and __suffix next to it. They lie on the field, centred, at its start and end — right to left they swap sides. The field’s padding grows by their width, --gl-input-prefix-size and --gl-input-suffix-size: 18px, an icon, unless set — set it for a wider unit. It follows the --prefix / --suffix modifier, or a visible affix where :has() is supported. A click on text, an icon or a disabled control reaches the field; enabled controls, links and elements with tabindex take their own, form-associated custom elements such as <glk-button> included (since 1.22.2). They take it even inside a container locked with pointer-events: none: lock it with inert, or disable them. <glk-input> in GlassKit Elements has prefix and suffix slots on this and measures the width itself.

Textarea

Select

The chevron is --gl-select-chevron, an SVG drawn in each theme’s muted text colour — since 1.20.0; before, it stayed white in the light theme and all but vanished. Set the token to your own url(…) to replace it. Right to left, the chevron and the room kept for it move to the left.

Search

Toggle Switch

The input is invisible, but it lies on top of the track and takes the click itself (since 1.20.0): a test tool that clicks the switch by its role reaches it, where the track used to draw over it and take the click. It covers the track only — the label text, which may hold a link, stays the label’s. A __label left empty takes no room, so a switch without text keeps no 12 px gap for one. Both hold for the checkbox and the radio button too. Right to left, the thumb starts on the right.

Checkbox

As with the toggle, the input lies on top of the box and an empty __label takes no room (since 1.20.0).

Radio Button

As with the toggle, the input lies on top of the circle and an empty __label takes no room (since 1.20.0).

Range Slider

Progress Bar

Accordion

Skeleton

Loading placeholder: shimmer lines standing in for text that has not arrived. Set each line's width; the shimmer follows the theme and holds still under prefers-reduced-motion. Mark the region aria-busy="true" so assistive tech knows it is loading.

Table

A plain <table> on glass: hairline rows, a muted header, numbers right-aligned in tabular figures. The .glass-table-wrap wrapper scrolls sideways where the columns do not fit. Put the class on the table itself — from a shadow root, ::slotted() cannot reach the cells, so this is document-level CSS by design.

Prose

Running text the app did not write by hand — rendered Markdown, help and info pages. One class on the container styles headings, paragraphs, lists, links, code, quotes, images and tables. Document-level by design: the content is light DOM, and ::slotted() stops at the first level.

Segmented

A small, exclusive choice as one control — traffic light, morning / afternoon, mode. Buttons inside a role="group"; the chosen one carries aria-pressed="true", and the styling hangs on exactly that attribute, so state and semantics cannot drift apart. The tone modifiers put a dot in a state colour before the label. Try it: click or Tab to a button and press Space. More options than fit? Without a modifier the row stays one line and runs past the edge; --scroll lets it scroll sideways, --wrap breaks it into lines. Both combine with --full.

Steps

Progress through a short flow: numbered circles joined by hairlines, done ones on the success surface (with an SVG check), the current one in the primary colour and marked aria-current="step".

The list is a size container: narrower than 360 px only the current step keeps its label, the others show their number; before that, labels shorten with an ellipsis. Keyed to the block's own width, not the viewport — here in a 300 px frame:

Sheet

The bottom sheet is the mobile sibling of the modal: an overlay that fades and a panel that rises from the bottom edge, only the top corners rounded, a grip, safe-area padding. Its own block, not a modal modifier, because layout, entry motion and gesture differ. --inline embeds the panel in the flow without an overlay; the overlay form needs a little JavaScript, shown below and mirrored by <glk-sheet> in GlassKit Elements.

Empty state

For empty lists and result pages: a centred column with a round icon plate, a title, a short muted text and room for one action or several, side by side.

Date strip

A row of day chips that scrolls sideways — a booking horizon, the days around today. Each chip is a <button> with the weekday, the day number and a dot that a tone modifier lights up; without a tone the dot is transparent, so chips with and without a mark keep the same height. The chosen chip carries aria-pressed="true", as in the segmented control; :disabled or aria-disabled="true" dims a day that cannot be chosen. The scrollbar is hidden. Give each button an aria-label with the full date — the visible “Tu 22” is no name. <glk-date-strip> in GlassKit Elements builds this from dates, with arrow keys and the chosen chip centred.

Calendar

One month: a title between two round nav buttons, a weekday row and 42 square day buttons with up to three dots beneath the number. The chosen day carries aria-pressed="true", --today draws a warm border, --other dims a day of the neighbouring month, :disabled or aria-disabled="true" dims a day outside the allowed range — the second keeps it focusable for arrow keys. It is a role="group" of buttons named with their full date, not a role="grid". <glk-calendar> in GlassKit Elements builds it, with keyboard navigation and Intl names.

Image picker

Choosing one image with a preview: a 72 px plate — the picture with object-fit: cover, or a placeholder icon — and a column with the label, a hint and the actions, which are ordinary .glass-btn buttons; the block brings no button look of its own. --round makes the plate a circle for avatars; a long label wraps and never squeezes the plate. Any image, not only photos. <glk-image-picker> in GlassKit Elements adds the file dialog, EXIF rotation and resizing.

Photo of the dog JPG or PNG · resized to 1024 px before upload

Choose

Profile photo

ChangeRemove

Utilities

📋 All Classes at a Glance

🤖 AI / LLM Reference

GlassKit ships with SKILL.md – a structured, machine-readable component reference designed for AI assistants, LLMs, and code-generation tools.

Attach or reference SKILL.md when asking an AI to generate GlassKit HTML for production-ready output.

🧩 The GlassKit Family

GlassKit is the CSS foundation of a three-layer family – three layers, one design language. For everything beyond single components, the sister projects are the intended path.