Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Cubic Bezier Generator
Drag the control points to shape an easing curve and copy the CSS.
Tool Panel
Processed locallyAbout Cubic Bezier Generator
Drag the two handles to shape the easing curve and watch it against a linear reference, which makes overshoot and a slow finish obvious. The curve is emitted as cubic-bezier().
- 1
The x axis is progress and the y axis is displacement; the editing area deliberately extends from -0.5 to 1.5, because an overshooting curve has control points outside 0–1 (the default here is 0.34, 1.56, 0.64, 1).
- 2
The x axis is held to 0–1: CSS requires both control-point x values inside [0,1], and anything outside invalidates the whole curve. Overshooting on y is legal, and that is where anticipation and bounce come from.
- 3
A side-by-side demo against linear motion shows exactly where the curve speeds up and slows down; the output is a `transition-timing-function: cubic-bezier(...)` line.
- 1
Drag a handle or pick a preset
The seven presets (linear / ease / ease-in / ease-out / ease-in-out / back-out / expo-out) are well-known point sets, and you can keep tuning after loading one.
- 2
Compare against linear
Watch the two squares diverge — the longer the decelerating stretch, the softer the motion reads.
- 3
Set the duration and copy
The duration only drives the demo; what you copy is the curve function itself, ready for your own transition.
CSS requires both control-point x values to lie in [0,1]; anything outside makes the curve invalid and the browser falls back to a default. The y axis may overshoot: above 1 is a bounce past the target, below 0 is a wind-up before it — that is exactly how overshoot easings are built.
No. `ease` is cubic-bezier(0.25, 0.1, 0.25, 1), `linear` is (0, 0, 1, 1) and `ease-in` is (0.42, 0, 1, 1). The presets are just names for those points — what you copy is the same function, interpolated by the browser the same way.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools