Tool · 2026-04-29
Cubic-bezier, by feel.
A CSS easing is four numbers: the x and y coordinates of two control points pulled out from the corners of a unit square. Reading the numbers tells you almost nothing. Watching a ball move under them tells you everything.
Demo
CSS
cubic-bezier(0.25, 0.1, 0.25, 1) Presets
Note
CSS forces the first and last anchors to (0, 0) and (1, 1), so all the expression lives in the two control points. The x of each handle stays inside the unit interval; the y is free to overshoot. Drag a handle above 1 or below 0 to get the rubbery, springy easings that feel like momentum.
The numbers do not describe a position over time directly. They describe a 2D path. CSS samples that path by stepping x forward in equal time slices and reading y as the easing value. This is why an S-shaped curve feels symmetric: equal time on the way in and on the way out, with the steep middle delivering most of the distance.
The browser does not honour every keyword the same way. The keyword ease is exactly cubic-bezier(0.25, 0.1, 0.25, 1), and yet it almost never feels right for UI motion. Material's standard curve cubic-bezier(0.4, 0, 0.2, 1) is closer to what most interfaces want.
Source
CSS Easing Functions Level 1, W3C Working Draft. The cubic-bezier timing function is defined in section 3.1.