CSS Cubic Bezier Editor
Visually edit the cubic-bezier() easing function used in CSS transitions and animations. Drag control points and watch the result live.
Preview
How to Use
Drag the two control points (blue handles) or type their coordinates directly. The curve updates instantly. Y is allowed in [-0.5, 1.5] for "overshoot"-style easings.
Press "Play" in the preview area to animate a ball with the current easing. Steeper curves produce more pronounced acceleration, deceleration, or bounce.
Copy the CSS line (transition-timing-function: cubic-bezier(…)) in one click. Use the preset buttons for standard easings.
FAQ
What does cubic-bezier(0.25, 0.1, 0.25, 1) mean?
It's a CSS easing function. The four numbers are the (x, y) of the two inner control points (P1 = (0.25, 0.1), P2 = (0.25, 1)). P0 = (0,0) and P3 = (1,1) are fixed. The curve they form maps "time → progress".
Can y be greater than 1 or negative?
Yes. Y is unbounded — y > 1 produces overshoot (passes the target then settles back; bouncy effect), y < 0 produces backtrack. CSS supports both. X must remain in [0, 1].
What are CSS's "ease", "ease-in-out", etc.?
`ease` = cubic-bezier(0.25, 0.1, 0.25, 1.0); `ease-in` = (0.42, 0, 1.0, 1.0); `ease-out` = (0, 0, 0.58, 1.0); `ease-in-out` = (0.42, 0, 0.58, 1.0); `linear` = (0, 0, 1, 1). Available as preset buttons.
Where does this go in CSS?
Use it in `transition-timing-function: cubic-bezier(...)` or `animation-timing-function: cubic-bezier(...)`. Both short interactions (transitions) and keyframe animations honor it.
Is anything sent to a server?
No. All curve math and previews run in your browser; nothing leaves the page.
