Experiment · 2026
Easing Visualiser
Live
- Motion
- CSS
- Tool
Drag the two control points of a cubic-bezier curve and watch a dot move to it. The fastest way to feel the difference between ease-out and ease-in-out.
Easing visualiser600ms
Presets
CSS value
cubic-bezier(0.16, 1, 0.3, 1)01 — WhyWhat made this worth building
Motion advice is usually given as adjectives — snappy, smooth, heavy. Those are useless until you connect them to numbers. Dragging the handles and watching the dot is the shortest path from "this feels wrong" to "the exit is too slow".
02 — NotesHow it works
A CSS cubic-bezier has four numbers: the x and y of two control points, with the endpoints fixed at (0,0) and (1,1). X is time, Y is progress. The curve is only valid if x stays in 0..1 — y may overshoot, which is exactly how you get a bounce.
- ease-out `(0, 0, 0.58, 1)` — fast start, gentle stop. The default for anything entering the screen.
- ease-in `(0.42, 0, 1, 1)` — slow start, fast finish. For things leaving. Feels wrong on entrances.
- ease-in-out `(0.42, 0, 0.58, 1)` — symmetric. For movement between two on-screen positions.
- `(0.16, 1, 0.3, 1)` — a very sharp decelerate. What I use for almost everything on this site.
- `(0.34, 1.56, 0.64, 1)` — y over 1 overshoots and settles. Playful, and tiring if applied broadly.