Cubic Bezier Generator β CSS easing editor
Design CSS easing curves with draggable control points, preview the animation and copy the cubic-bezier() value. Presets included, in your browser.
π Runs entirely in your browser. Your input and output are never sent to a server or stored β fully private.
Drag the two handles to shape the curve.
About this tool
This cubic-bezier editor lets you craft custom CSS easing curves by dragging two control points across a grid. As you shape the curve, an animated preview plays the motion in real time, so you can feel exactly how your transition will accelerate and slow down. When it looks right, copy the cubic-bezier() value and drop it into a CSS transition or animation. It is far more expressive than the built-in ease and linear keywords, and the whole editor runs locally in your browser.
Frequently asked questions
What does a cubic-bezier curve actually control?
It controls the timing of an animation β how progress is distributed over its duration, rather than its length or distance. The curve maps elapsed time on the horizontal axis to how far the animation has advanced on the vertical axis, so a steep section means fast motion and a flat section means slow motion. The two draggable control points bend that curve, letting you design eases that start gently, snap quickly, or anything in between.
Can the control values go outside the 0 to 1 range?
The two time values (the X of each control point) must stay between 0 and 1, but the progress values (the Y) are free to go above 1 or below 0. Pushing Y past those limits makes the animation overshoot its target and spring back, or pull back before launching forward β the basis of bouncy, elastic and anticipation effects. The preview shows this motion clearly, so you can dial in just enough bounce without overdoing it.
Where do I use the value, and does the editor run on my device?
Paste the cubic-bezier() value into a transition-timing-function or animation-timing-function in your CSS, where it replaces keywords like ease-in-out. It works in every modern browser. The editor itself runs entirely in your browser with local JavaScript β the curve, the live preview and the generated value are all computed on your device, so nothing you create is uploaded or stored on a server.