# How the Glass-Effect Border Simulation Works with Directional Light in Islands Dark

> Discover how Islands Dark simulates a floating glass effect with directional light using CSS custom properties, conic gradients, and pseudo-elements for dynamic UI panel borders.

- Repository: [Bradley Wyatt/vscode-dark-islands](https://github.com/bwya77/vscode-dark-islands)
- Tags: deep-dive
- Published: 2026-05-06

---

**Islands Dark creates a floating glass panel effect using CSS custom properties, conic gradients, and pseudo-elements that simulate a directional light sweeping continuously around UI panel borders.**

The **glass-effect border simulation** in the `bwya77/vscode-dark-islands` repository transforms VS Code’s rigid interface into a living, illuminated workspace. This directional light effect gives the impression that a spotlight is perpetually circling each panel, highlighting the translucent glass edges with a moving glow. The implementation relies entirely on advanced CSS techniques injected via the Custom UI Style extension.

## The Architecture of the Glass Effect

The directional light system rests on a foundation of animatable CSS properties and carefully layered pseudo-elements. Rather than using static images or JavaScript, the theme leverages the browser’s rendering engine to calculate the light position in real time.

### Animatable CSS Custom Properties

In [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css), the theme declares a custom property called **`--border-angle`** using the `@property` rule. This registration tells the browser to treat the value as an angle that can be interpolated smoothly during animations.

```css
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

```

By registering this property, the browser can hardware-accelerate the rotation, ensuring the directional light sweeps smoothly without jank.

### Rotating Light Source

The animation definition named `islands-aurora` rotates the `--border-angle` value from 0 degrees to 360 degrees over eight seconds. This creates the perpetual motion of the directional light around the panel perimeter.

```css
@keyframes islands-aurora {
  to { --border-angle: 360deg; }
}

```

## Implementing the Directional Light Overlay

The visible glow is rendered using pseudo-elements positioned absolutely over each panel. These layers draw the conic gradient and constrain it to the borders using CSS masking.

### Pseudo-Elements as Light Layers

Each major panel—including **`.part.sidebar`**, **`.part.editor`**, **`.part.auxiliarybar`**, and **`.part.panel.bottom`**—receives an `::after` pseudo-element defined in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css). This layer covers the entire panel with `inset: 0`, inherits the `border-radius`, and sits above content via `z-index: 999`.

The positioning ensures the light effect hugs the panel edges perfectly while remaining non-interactive thanks to `pointer-events: none`.

### Conic Gradient and Masking

The `::after` pseudo-element draws a **conic gradient** that starts at the current `--border-angle` value. This produces a wedge of colored light that rotates around the center point.

```css
.part.sidebar::after,
.part.editor::after,
.part.auxiliarybar::after,
.part.panel.bottom::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 20%,
    rgba(13,188,121,0.35) 27%,
    rgba(125,200,160,0.2) 33%,
    rgba(13,188,121,0.12) 38%,
    transparent 45%,
    transparent 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  pointer-events: none !important;
  z-index: 999 !important;
  animation: islands-aurora 8s linear infinite !important;
}

```

The **`-webkit-mask`** property uses two linear gradients with the `xor` composite mode to punch out the center of the gradient, leaving only a 1-pixel border glow visible. This creates the illusion that the light travels *along* the glass edge rather than filling the panel.

## Panel-Specific Timing and Styling

To prevent the UI from appearing robotic, the theme introduces variation in the light timing across different panels while maintaining the static glass appearance through semi-transparent borders.

### Animation Phase Offsets

The [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) file applies negative animation delays to stagger the directional light rotation across panels. This creates a natural, wave-like effect where the light hits the sidebar, editor, and bottom panel at different moments.

```css
.part.editor::after       { animation-delay: -2s !important; }
.part.auxiliarybar::after { animation-delay: -4s !important; }
.part.panel.bottom::after { animation-delay: -6s !important; }

```

These offsets ensure the glass-effect border simulation feels organic rather than synchronized.

### Base Glass Borders

Underneath the animated glow, the static glass appearance comes from [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json). The Custom UI Style extension applies semi-transparent white borders to define the panel edges.

```json
".part.sidebar": {
  "border-top":    "1px solid rgba(255,255,255,0.12) !important",
  "border-left":   "1px solid rgba(255,255,255,0.08) !important",
  "border-bottom": "1px solid rgba(255,255,255,0.02) !important",
  "border-right":  "1px solid rgba(255,255,255,0.02) !important"
}

```

The combination of these static borders with the rotating conic gradient overlay produces the final **living glass** aesthetic.

## Complete Implementation Examples

To implement this glass-effect border simulation in your own VS Code customization, you need both the CSS animation file and the border definitions in your settings.

The [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) file handles the directional light logic, while [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) provides the structural glass borders. Both files work together—the CSS creates the moving highlight, and the JSON defines the translucent panel edges that the light appears to illuminate.

## Summary

- **`--border-angle`** is registered as an animatable CSS property in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) to enable smooth rotation.
- **`@keyframes islands-aurora`** rotates the angle from 0° to 360°, driving the directional light movement.
- **`::after` pseudo-elements** on panel classes render the conic gradient overlay with `z-index: 999`.
- **CSS masking** with `-webkit-mask-composite: xor` confines the glow to the 1-pixel border area.
- **Animation delays** (-2s, -4s, -6s) create out-of-phase lighting across sidebar, editor, and auxiliary panels.
- **Semi-transparent borders** defined in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) form the static glass structure beneath the animated light.

## Frequently Asked Questions

### What file controls the speed of the directional light rotation?

The animation speed is defined in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) within the `islands-aurora` keyframes and the `animation` shorthand property. The default duration is **8 seconds** per rotation (`animation: islands-aurora 8s linear infinite`). You can adjust this value to make the directional light sweep faster or slower.

### Why does the light effect use `!important` declarations everywhere?

The `!important` flags ensure the glass-effect border simulation overrides VS Code’s default styling and any competing extensions. Since the Custom UI Style extension injects these rules into the Electron application, the high specificity prevents the theme’s floating glass panels from being accidentally disabled by VS Code updates.

### Can I change the color of the directional light glow?

Yes. In [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css), modify the `rgba()` values inside the `conic-gradient` definition. The current green tint (`rgba(13,188,121,0.35)`) can be replaced with any color values to match your preferred accent. The gradient uses multiple color stops to create a soft, glowing beam rather than a hard edge.

### How does the mask create the border-only glow?

The `-webkit-mask` property uses two linear gradients: one applied to the `content-box` (the inner content area) and one to the entire element. The `xor` composite mode subtracts the inner area from the outer, leaving only the 1-pixel padding area visible. This masks the conic gradient so only the border appears illuminated, creating the directional light effect along the glass edge.