siutil. cubic-bezier Generator
processed in your browser · never uploaded

Curve editor

Control points

Presets

Preview

Duration

1.0s

CSS

 
Everything runs in your browser — nothing is uploaded.
 
 
   
  
An interactive cubic-bezier generator for building the easing curves used in CSS animations (transition and animation). Drag the two control points on the graph with your mouse or finger and a value like `cubic-bezier(0.25, 0.1, 0.25, 1)` is generated instantly, ready to paste into `transition-timing-function` or `animation-timing-function`. The common keywords — `ease`, `linear`, `ease-in`, `ease-out` and `ease-in-out` — are available as one-click presets, so you can start from a familiar curve and fine-tune it to exactly the acceleration and deceleration you want. You can also type the four numbers (x1, y1, x2, y2) directly, and because y is allowed to go above 1 or below 0, you can design overshoot or bounce curves that go past the target and settle back. A live preview shows a dot animating with your easing; use the replay button to loop it and the duration slider to change the speed, so you can see whether the motion feels right. Editing the curve, the preview and the code generation all run entirely in your browser — the values and settings you enter are never uploaded, stored, or sent to a server.
How to use
  1. Drag the two control points on the graph to shape the curve. Starting from a preset (ease, ease-out, etc.) is often quickest.
  2. Check the motion in the dot preview. Use the replay button to loop it and the duration slider to change the speed.
  3. Copy the generated `cubic-bezier(...)` and paste it into your CSS `transition-timing-function` or `animation-timing-function`.
FAQ
Are my values and settings uploaded anywhere?
No. Editing the curve, the preview and the code generation all run entirely in your browser. The control-point values and settings you enter are never uploaded, stored, or sent to a server — the tool is fully local.
Can I make overshoot (bounce) curves?
Yes. The y1 and y2 values can go above 1 or below 0, and you can drag the control points outside the unit box on the graph. This lets you create bouncing or overshoot easings that move past the target and settle back. Note that x1 and x2 are limited to 0–1, as required by the cubic-bezier specification.
Where do I paste the generated cubic-bezier?
Paste it into the CSS `transition-timing-function` or `animation-timing-function` (or inside a `transition` / `animation` shorthand). For example: `transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);`.
How is this different from ease or ease-in-out?
Keywords like `ease` are just aliases for fixed cubic-bezier values (for example, ease = cubic-bezier(0.25, 0.1, 0.25, 1)). Load one from the presets and nudge a control point to get a custom acceleration curve or an overshoot that the standard keywords cannot express.
Does changing the preview duration affect the output?
No. The duration slider only changes the playback speed of the preview; it does not affect the generated `cubic-bezier(...)` value (the shape of the curve). Set the actual animation length with the `transition` / `animation` duration in the CSS where you paste the value.