Badge
--convexity: 6
Open source · MIT
Metal that behaves like CSS.
Add an adaptive metallic finish to ordinary container elements. MetalliCSS reads each box, its fallback color, and custom properties, then redraws when that element changes size or style.
- Runtime dependencies
- 0
- Interface
- CSS custom properties
- License
- MIT
Copy this surface
Ordinary markup, uncommon finish
Not just another shiny button.
MetalliCSS follows the box it is given, from tight controls to full interface panels. The examples below are live elements rendered by the same local module as the playground.
Switch
--convexity: -3
Panel
--metal: neutral
Motion
prefers-reduced-motion
The honest version
A rendering layer, not a design system.
You keep control of the element and its content. MetalliCSS is responsible for one thing: turning its geometry and CSS variables into a responsive reflection.
-
01
Read
The renderer reads computed dimensions, color, corner radius, and the MetalliCSS custom properties.
-
02
Shape
A reflection and displacement field are composed for that exact box—convex, flat, or inset.
-
03
Paint
The result is painted behind your content. Managed elements refresh after their class, inline style, or dimensions change.
Canvas renderer
Modern-browser progressive enhancement, no remote image request, and no runtime package dependencies.
Expanded controls
Namespaced color, light, intensity, and resolution inputs with documented ranges and predictable fallbacks.
Houdini paint
Research whether a Paint Worklet can improve measured performance while preserving the Canvas renderer as a reliable fallback.
Start with one element
Small API. Plain HTML.
Install the module, add the class, then tune the material in the same stylesheet as the rest of your interface.
1 · Install
terminal
npm install metallicss
2 · Render
app.js
import { metallicss } from "metallicss";
metallicss(document.querySelector(".metallicss"));
3 · Style
styles.css
.metallicss {
--metal: silver;
--convexity: 5;
border-radius: 2rem;
}Built in the open