File Checksum Calculator
Verify a download by computing its SHA-256 without uploading it anywhere.
Cubic Bezier Generator
Draw an easing curve and see it against the standard ones.
Curve
Drag either handle. Values above 1 or below 0 create an overshoot.
Motion
Your easing above, a linear one below for comparison.
Quick Tool Overview
The Cubic Bezier Generator lets you drag an easing curve and watch the motion it produces, with the standard easings drawn alongside for comparison and overshoot values supported.
- What it does
- Edits and previews a cubic-bezier easing curve
- You give it
- Two draggable control points
- You get back
- A cubic-bezier() value and a motion preview
- Best for
- Tuning how a transition or animation feels
About the Cubic Bezier Generator
An easing function decides how an animation distributes its movement over its duration, and cubic-bezier gives you four numbers to control it. Drag the two handles and the curve updates, with a moving dot showing the motion it produces.
Seeing the curve beside the named easings is what makes the numbers meaningful. ease, ease-in, ease-out and ease-in-out are all drawn for comparison, along with the extended set — sine, quad, cubic, quart, expo and back — that design systems borrow. Y values outside 0 to 1 are allowed and are exactly how an overshoot is made: the animation passes its target and settles back, which is what gives motion a sense of weight.
Key features of the Cubic Bezier Generator
Motion, not just a curve
A dot travels the curve in real time, which is the only way to judge an easing — the shape alone tells you little.
Compared with the standards
ease, ease-in, ease-out and the extended sine-to-expo set are drawn behind your curve for reference.
Overshoot supported
Y values outside 0 to 1 make the animation pass its target and settle back, which is what gives motion weight.
Named easings as values
Every named easing shown as its four numbers, so you can start from one and adjust.
An honest curve solver
The preview solves the parametric curve the way a browser does, rather than approximating it.
How to use the Cubic Bezier Generator
-
1
Drag the handles
Two control points define the curve; the numbers update as you move them.
-
2
Watch the motion
A dot travels the curve so you can feel the easing rather than read it.
-
3
Compare with the standards
The named easings are drawn alongside for reference.
-
4
Copy the value
The cubic-bezier() function, ready for a transition or an animation.
Frequently asked questions
ease-out for anything entering or responding to a click, because it starts fast and feels immediate. ease-in for things leaving. ease-in-out for a movement between two resting states. Linear almost never, except for a spinner.
The y values can, and that is how you make an overshoot — the animation goes past its target and settles back. The x values cannot; they represent time, which cannot run backwards.
ease is cubic-bezier(0.25, 0.1, 0.25, 1) and is asymmetric — it accelerates faster than it decelerates. ease-in-out is symmetric. ease is the default for transitions and is subtly more natural.
CSS has linear() now, which can approximate a spring with many points, and it is better for bouncy motion than any cubic-bezier. For anything simpler, a bezier is easier to reason about and to hand-tune.
Reviews of the Cubic Bezier Generator
What people who use the Cubic Bezier Generator think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Cubic Bezier Generator. It takes half a minute and no account.
Write the first reviewMore developer tools
CSS Formatter
Re-indent a stylesheet, or strip it back to one line.
JSON Viewer
Explore a JSON document as a collapsible tree with paths you can copy.
JSON to Kotlin Data Class
Generate Kotlin data classes with Gson or kotlinx.serialization annotations.
Fake Address Generator
Generate plausible addresses in the format each country actually uses.
curl to Code Converter
Turn a curl command into working fetch, axios, Python, PHP, Go or Ruby.
JSON to XML
Convert JSON into XML, with control over attributes, arrays and the root element.
Nano ID Generator
Generate Nano IDs — shorter than a UUID, and URL-safe by design.