Tune a shape or an easing curve
Drag and watch the preview — easier to understand than editing percentages and the four cubic-bezier numbers by hand.
Loading…
Guide
CSS Lab is a single tool page for experimenting with four common visual CSS areas: border-radius corners and organic shapes, clip-path: polygon() clipping, cubic-bezier() easing curves, and 12 loaders built from nothing but HTML and CSS. It is not a directory of links: all four tabs have their own live editor and code output inside the page, so it is documented here as a real tool in its own right.
Updated 2026-09-103 min read
| Input | Output | Notes |
|---|---|---|
| 8-value corner parameters | border-radius: ... / ...; |
Horizontal/vertical radius per corner, 0–100% |
| Five-point star vertices | clip-path: polygon(...) |
Coordinates keep about one decimal place |
| A bouncy control point | cubic-bezier(...) |
x is limited to 0–1 while y can reach −0.5–1.5 |
Math.random(), not the public Web Crypto random module.Drag and watch the preview — easier to understand than editing percentages and the four cubic-bezier numbers by hand.
Pick a pure CSS loading effect for a framework-free page, change the main colour and copy the minimal HTML/CSS snippet.
No. All four tabs provide their editor and code output inside the same component tree, so the page itself is the working tool.
CSS allows the y control points to leave 0–1 in order to produce motion that first reverses or overshoots the end; x still has to stay within 0–1.
Every CSS parameter, preview and copied result is generated in the current browser page; nothing is uploaded and no remote code is executed.
Updated 2026-09-10
Petal border-radius shapes, drag-point clip-path editing, cubic-bezier easing curves and 12 loading animations in one
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Ellipse mode sets a horizontal and a vertical radius for each corner (the 8-value syntax), which gives petals and organic shapes