The Liquid Metal Button generator is a free tool that builds buttons with a liquid-metal (chrome) finish using a WebGL shader. Pick a template, tune waviness (rep), light angle, speed, color, rim and shape, and copy dependency-free HTML/CSS/JS (MIT).
How to use it (3 steps)
- Pick a template: click the closest preset from FLAT or A–H
- Tune it: adjust waviness, angle, speed, rim, hue and tint, plus shape (rectangle/circle) and theme (dark/light)
- Copy the code: copy from the “All-in-one (HTML/CSS/JS)” or “JS + CSS” tab and paste it in
Settings cheat sheet
| Setting | What it does |
|---|---|
| waviness | Strength of the metal ripples. 0 = a smooth, mirror-like metal with no waves |
| angle | Angle of the light / ripples (0–360°) |
| speed | Animation speed. 0 = static |
| rim | Width of the visible metal rim (px) |
| hue | Color hue of the pattern (0–360°) |
| tint | Color strength. 0 = white (uncolored metal); raise it to apply the hue |
| shape | Rectangle / Circle |
| theme | Dark (dark face + light text) / Light (light face + dark text). Also switches the preview background |
The two code tabs
- All-in-one (HTML/CSS/JS): a self-contained snippet that includes the WebGL engine and runs on paste
- JS + CSS: a lightweight version (this button’s CSS + call) for sites that already load the
createLiquidMetalhelper
FAQ
What kind of buttons can I make?
Buttons with a liquid-metal (chrome) finish rendered by a WebGL shader. Change the waviness, color, rim, shape and theme to go from silver to gold or colored metal.
Can I use the generated code as-is?
Yes. The All-in-one (HTML/CSS/JS) tab is a self-contained snippet that includes the WebGL engine and runs on paste. The JS + CSS tab is a lightweight version for sites that already load the createLiquidMetal helper. No external dependencies (MIT).
Can I make a smooth metal with no waviness?
Yes. Pick the FLAT template or set waviness (rep) to 0 for a smooth, mirror-like metal.
Can I make the rim white?
Yes. Set tint to 0 for a white (uncolored) metal. Raise hue and tint for gold, copper, blue, green and more.
Is the animation included?
Yes. Use the speed slider to control motion. Set speed to 0 for a static metal.
Which browsers are supported?
Any major browser with WebGL support — Chrome, Edge, Safari and Firefox.
Can I use it commercially?
Yes. The generated code is MIT licensed and free to use on commercial sites.