Bootstrap surface

A real page to style.

Launch the workbench, pick any element, tune the material engine, and copy production-ready CSS or SCSS.

Quick start

Click Launch Workbench in the navbar.
Use the Pick tool (P) to select any element below.
Adjust sliders in the Properties panel.
Copy CSS/SCSS from the Export panel.

The local demo uses dynamic imports and a panel shim. In production, boot from a CDN-hosted boot.js.

Cards & Badges

Card background, body, footer, border, and shadow tokens.

primary secondary success info

Card footer surface

Form Controls

Sample input

Checkbox option

Alerts & Progress

Info alert surface

Engines

SkeuroForge

Physically-based skeuomorphic surfaces with bevel, shadow, and material BRDF controls.

Gradient Builder

Bootstrap-aware gradient ramps with okLAB interpolation and multi-stop control.

VeilTexture Forge

Procedural tiling textures (speckle, lines, dither, grain, brushed metal, cellular).

Shadow Lab

Layered outer/inner/text-shadow composer with six named presets.

Keyboard shortcuts

PPick element

AApply CSS to page

CCopy CSS

SCopy SCSS

+−Zoom in / out

0Reset zoom

CtrlZUndo

CtrlYRedo

Scroll over the Graphics panel preview to zoom. Shortcuts ignore text inputs.

Bookmarklet

Replace http://127.0.0.1:48187 with your CDN root after deployment. Drag it to your bookmarks bar.

javascript:(()=>{const s=document.createElement('script');s.type='module';s.src='http://127.0.0.1:48187/src/boot.js';s.dataset.manifest='http://127.0.0.1:48187/manifests/css-workbench.xml';document.documentElement.append(s);})();