Style sheets for the GPU.
3D scenes written in CSS, compiled into a single shader for WebGL2 and WebGPU.

Website · Playground · Reference

---

GSS (GPU Style Sheets) is a 3D language for people who already speak CSS. Declare shapes in a @scene, style them with selectors, and the compiler turns it all into one raymarched shader. No Three.js, no meshes.

@scene {
  torus#ring;
  sphere#ball;
}

#ring {
  translate: 0 1.2 0;
  rotate-x: 70deg;
  radius: 1.1;
  thickness: 0.14;
  color: #e8e6e1;
}

#ball {
  translate: 0 1.2 0;
  radius: 0.55;
  color: #ff5a36;
  material: jelly(0.6);
  animation: float 2s ease-in-out alternate;
}

@keyframes float {
  from { translate: 0 1.2 0; }
  to   { translate: 0 1.5 0; }
}

Documentation

• Getting started: why GSS, and your first scene.
• Installation: a tag, npm or Vite; WebGPU, TypeScript and the editor.
• Every page: each at-rule, selector, shape, property and function, with examples.

The same pages, with every example to edit live: gss-lang.dev/docs.

What it can do

• Selectors and the cascade: classes, ids, combinators, :hover, :has(), :nth-child(), nesting.
• Shapes: cube, sphere, torus, cylinder, cone, capsule, path, prism, lathe and more.
• Materials: matte(), metal(), glass(), jelly(), emissive(), iridescent(), and textures.
• Motion: @keyframes, transition, scroll-driven animations, offset-path.
• Values: calc(), var(), @property, random() and the CSS color functions.
• Effects: gradients, noise, masks, blur, bloom and grain.
• The scene: floor, background, lights, fog, shadows and an orbit camera.
• Responsive: @media, light-dark() and if().

Install

A tag, no build step:

<script type="module" src="https://cdn.jsdelivr.net/npm/gss-lang@0.0.7/lib/embed.js"></script>
<gss-scene src="logo.gss"></gss-scene>

npm:

npm install gss-lang@0.0.7

import { mount } from "gss-lang";
mount(canvas, "@scene { sphere; }");

Vite, compiled at build time:

// vite.config.ts
import gss from "gss-lang/vite";
export default { plugins: [gss()] };

// main.ts
import { mount } from "gss-lang/runtime";
import logo from "./logo.gss";
mount(canvas, logo);

WebGPU, TypeScript and the editor: see Installation.

Tools

• Playground: a live editor, errors under their line, the generated GLSL and WGSL, export to Shadertoy.
• Reference: searchable, one live example per entry.
• VS Code: highlighting, formatting and snippets. code --install-extension lukyvj.gss-language

Status

0.0.7, early: the syntax may still change. See the changelog.

Contribute

Bugs and ideas: issues or @GSS_lang. Pull requests are welcome.

npm install
npm run dev   # the site, the playground and the reference
npm test

Before a pull request, read the contributing guide: where things live, and which branch to start from.

Credits

• Signed distance functions, smooth blending and soft shadows adapted from Inigo Quilez (MIT).
• Hash functions from Hash without Sine by David Hoskins (MIT).
• Gradient noise after Ken Perlin's Improved Noise.
• Color conversions from the CSS Color 4 sample code and Björn Ottosson's OKLab.
• Editor built on CodeMirror (MIT).
• Fonts: Martian Mono, Geist and JetBrains Mono (SIL OFL 1.1).
• Zdog studies after models by Dave DeSandro; Earth and Moon maps by NASA.
• texture-mapping: sphere contributed by Yoshihiro Hasegawa.

License

Apache 2.0.