Drag the two control-point handles to design a custom CSS easing curve. Preview it live with an animated dot, then copy the ready-to-use cubic-bezier() value.
cubic-bezier(0.25, 0.1, 0.25, 1)🔒 Everything runs locally — no data is uploaded.
A CSS cubic-bezier() timing function always starts at point (0, 0) and ends at point (1, 1). Two control points, P1 and P2, pull the curve toward themselves, bending how quickly progress changes between the start and end. The x axis represents elapsed time and must stay between 0 and 1, while the y axis represents animation progress and can overshoot past 0 or 1 for bounce and anticipation effects.
Move either handle with a mouse or a finger to reshape the curve and see the equation update instantly.
Replay the dot animation to feel exactly how the easing accelerates and decelerates over time.
Start from ease, ease-in-out, back or elastic, then fine-tune the handles to taste.
It controls how the rate of a CSS transition or animation changes over time using two control points that bend a curve between a fixed start and end point.
The x axis represents elapsed time, which must always move forward from 0 to 1, so the CSS specification restricts the x values of both control points to that range.
Yes. The y axis represents progress, and control points can exceed 0 or 1 to create overshoot or anticipation effects like a back or elastic easing.
Paste the generated cubic-bezier(x1, y1, x2, y2) value into any transition-timing-function or animation-timing-function property.
Ease-in starts slow and accelerates, ease-out starts fast and decelerates, and ease-in-out does both, starting and ending slowly with faster motion in the middle.