Free animation tool
Cubic Bezier Editor
This cubic bezier editor lets you set the two control points of a CSS easing curve, see the curve and a moving preview, and copy the cubic-bezier() value. It is free and needs no sign-up.
Updated
Cubic Bezier Coordinates
cubic-bezier(0.16, 1, 0.3, 1)/* CSS Cubic Bezier Timing */
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);How to use the Cubic Bezier Editor
- 1
Set the first control point
Use the X1 and Y1 sliders. X1 shapes how the motion starts.
- 2
Set the second control point
Use X2 and Y2. Y values above 1 or below 0 create overshoot.
- 3
Play the preview
Run the preview to see the curve on a moving element.
- 4
Copy the CSS
Copy the transition line and change the duration to suit your element.
Formats and limits
| Inputs | X1 and X2 from 0 to 1, Y1 and Y2 from -0.5 to 1.5 |
|---|---|
| Output | CSS transition with cubic-bezier() |
| Browser support | cubic-bezier() works in every current browser |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Cubic Bezier Editor (this page) | Quickly shaping one CSS curve with sliders and a preview | Free, no account, runs in your browser. |
| cubic-bezier.com | Comparing two curves side by side | Made by Lea Verou. Drag handles, compare against a library of curves, import and export curves. |
| Easings.net | Picking a named easing such as easeOutQuart | A cheat sheet of standard easing functions with a preview of each. |
Frequently asked questions
What is a cubic bezier easing?
A cubic bezier easing is a curve from (0,0) to (1,1) shaped by two control points. CSS writes it as cubic-bezier(x1, y1, x2, y2). The x axis is time and the y axis is progress.
Why must the X values stay between 0 and 1?
X is time. Values outside 0 to 1 would make time run backwards, so CSS rejects them. Y values can go outside that range, which creates overshoot or anticipation.
What cubic-bezier values match ease, ease-in and ease-out?
ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1) and ease-in-out is (0.42, 0, 0.58, 1).
When should I use a spring instead of a cubic bezier?
Use a spring when people can interrupt the motion, such as drags, swipes and toggles pressed twice. A bezier has a fixed duration and restarts when interrupted. A spring keeps its velocity.