cubic-bezier.com
Drag control points, compare easing previews, and read the resulting cubic-bezier() value for CSS motion.
What is cubic-bezier.com?
cubic-bezier.com is Lea Verou’s CSS easing-curve tool. Dragging a control point updates both the graph and the displayed cubic-bezier() value.
Its preview area compares the current curve with another curve from the library. We tested editing a control point, selecting a comparison curve, and playing the preview.
Why keep it handy?
An easing name does not show where motion speeds up or slows down. Watching two blocks move over the same duration, alongside their curves, gives designers and developers something concrete to compare.
Who is it for?
It suits frontend developers tuning interface transitions and designers discussing easing with engineers. Use it to choose a curve, not as a full animation-timeline editor.
A practical starting point
In our test, dragging the first control point changed the displayed value from cubic-bezier(.17,.67,.83,.67) to cubic-bezier(.3,.29,.83,.67). The graph changed with it.
We then selected ease-in-out as the comparison curve and pressed Go!. The two preview blocks moved using their respective curves. Compare the motion, then read the on-page CSS value for further work in your project.
Before you use it
We verified the displayed CSS value but could not confirm the clipboard-copy result, so Copy is not a verified feature in this test. We also did not test library import/export, phone-touch input, or project integration. Recheck the effect with your own component and animation duration.
