📈 CSS cubic-bezier Editor

Drag the two control points to edit a cubic-bezier curve. Preview the motion with the animated dot.

100% Free No signup Browser-only 5 languages Dark mode

🔒 About Privacy

・All processing runs in your browser
・Your input data is never sent to any server
・No storage logs, no history, no database
・No signup, no login, no payment ever

Drag the blue and pink points to edit the curve

Preview

Presets

CSS

📖 Where people get stuck

Drag the two control points to shape a cubic-bezier() curve and watch the motion as you go. Everything runs in the browser. The curve describes how the speed changes: the steeper the graph, the faster the element is moving at that moment. Tuning the easing alone will not make motion feel good, though — what actually decides the impression is at least as much the duration.

Case	What happens	What to do
Using ease-in-out for everything	`ease-in-out` is slow at both ends, so using it for something appearing makes the first instant look like nothing happened. On a response to a click especially, that reads as the button not having registered. What people perceive as slow is not the total duration but the gap between pressing and the first visible movement.	The convention is decelerate on entry, accelerate on exit. An ease-out such as `cubic-bezier(0, 0, .2, 1)` leaps at the start and settles quietly, which reads as responsive. For closing or dismissing, an ease-in such as `cubic-bezier(.4, 0, 1, 1)` starts gently and leaves quickly, which feels natural. Anything that changes position wants ease-out; something that merely fades in place is fine on linear.
The curve makes no perceptible difference	The duration is too short. Below about 150 ms the difference between easing curves is essentially imperceptible and they all look alike. Above about 500 ms the animation starts registering as waiting rather than as feedback. An elaborate curve only pays off in the band between those.	The standard range for UI is 150–300 ms. A hover or focus colour change wants 100–150 ms, a modal or drawer 200–300 ms, and a page-level transition around 400 ms. As a rule the longer the distance travelled, the longer the duration: 150 ms for something crossing the whole screen looks unnaturally fast. Settle the duration first, then shape the curve.
Cannot get a bounce out of `cubic-bezier`	The Y coordinates may go outside 0–1, but the X coordinates may not. Pushing Y above 1 gives you an overshoot that goes past and settles back — `cubic-bezier(.68, -.55, .27, 1.55)` and friends — but a bounce that goes out, comes back and goes out again cannot be expressed by a single bezier, because one curve cannot double back on itself.	For a real bounce, either write `@keyframes` or approximate it as a polyline with the `linear()` function. Before that, though, ask whether you need one: in production UI a bounce earns its place only where you genuinely want to catch the eye — an undo, an arriving notification. Put it on something people touch all day and it becomes an irritation by the third time.

Whatever curve you pick, the property you animate matters orders of magnitude more for performance. transform and opacity are handled on the compositor with no layout and no paint, while animating width, height, top or margin redoes layout on every frame. Moving something 100 px to the right costs completely differently as left: 100px versus transform: translateX(100px). And always provide @media (prefers-reduced-motion: reduce) — for users with vestibular disorders, large motion has real physical effects.

📖 How to Use

1

Drag the control points

Drag the blue and pink points to reshape the curve. The curve becomes the timing function.
2

Preview the motion

Press Play to animate the red dot and see the actual easing.
3

Copy the CSS

Copy the generated transition / animation snippet and paste into your CSS.

❓ Frequently Asked Questions

Is my data sent to your server?

No. Everything runs in your browser. You can verify in the Network tab.

Can Y values go outside the 0-1 range?

Yes. Y can exceed 0-1 for bounce or overshoot effects. X must stay within 0-1.

Where can I use this?

Use it in CSS transition-timing-function and animation-timing-function properties.

🔗 Related Tools

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.