Cubic Bézier editor
Shape an easing curve with draggable handles, exact points and a motion preview.
How it works & useful details
How to use this tool
Drag either control point or focus it and use arrow keys. Shift moves ten steps. Play a single preview to compare the resulting motion.
Supported values and limitations
X coordinates are bounded from 0 to 1; Y coordinates from -1 to 2 allow overshoot. Exact numeric inputs and presets provide keyboard alternatives. Animation runs only when requested, lasts at most three seconds and respects reduced-motion preferences.
About this tool
Cubic bezier editor lets you shape an animation easing curve by dragging control handles, reading exact coordinates, and watching a motion preview. It is the difference between guessing at an easing and tuning one.
The generated cubic-bezier() function is ready for CSS transitions and animations. The editor runs entirely in your browser, and nothing about your project is uploaded.
How to use it
- Drag the two control handles to shape the curve.
- Or type exact coordinates for reproducible values.
- Watch the motion preview to judge the feel.
- Copy the cubic-bezier() value into your stylesheet.
Worked example
transition: transform 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);cubic-bezier(0.25, 0.1, 0.25, 1) is exactly CSS's built-in ease curve: a gentle start, fast middle, and long, soft landing. The four numbers are the x and y coordinates of two control points. The curve always starts at (0, 0) and ends at (1, 1).
Choosing an easing
- Ease-out, for example cubic-bezier(0, 0, 0.2, 1): elements entering the screen. Fast start, gentle stop, so the interface feels responsive.
- Ease-in, for example cubic-bezier(0.4, 0, 1, 1): elements leaving the screen.
- Ease-in-out, for example cubic-bezier(0.4, 0, 0.2, 1): elements moving from one place to another on screen.
- Y values above 1 or below 0 overshoot, which creates a small bounce, as in cubic-bezier(0.34, 1.56, 0.64, 1).
Keep interface transitions short, around 150–300ms for small elements. Respect users who set prefers-reduced-motion by reducing or removing movement for them.
Frequently asked questions
What do the four numbers mean?
They are the x and y coordinates of two control points, with y values outside 0 to 1 creating overshoot.
Why does my animation not change?
Check that the property you animate is animatable and that the transition duration is long enough for the easing to be visible.
Does the preview reflect real performance?
It shows the timing curve, not the cost of animating a property; animate transform and opacity for smooth results.
Why can't the X values go outside 0 to 1?
X represents time, and time cannot run backwards, so CSS requires x1 and x2 to be between 0 and 1. Y represents progress and may overshoot.