Cubic-Bezier Easing Editor
Design CSS easing curves by dragging the two control points, watch elements move with your curve, and copy the cubic-bezier() value for a transition, an animation, a CSS variable or the Web Animations API.
How to Use
- Drag the two round handles to bend the curve, or type exact values into x1, y1, x2 and y2 (x stays between 0 and 1; y may go past for overshoot).
- Watch the four preview rows move, scale, fade and rotate with your curve; change the duration to feel it faster or slower.
- Press a preset for a CSS keyword (ease, ease-in, ease-out, ease-in-out, linear) or a ready-made overshoot or anticipation curve.
- Choose what to copy with Output: a transition, an animation, a CSS variable or a Web Animations call.
- Read the readouts and Show Work for the progress at each point in time and whether the curve matches a keyword, then press Copy.
cubic-bezier(0.25, 0.1, 0.25, 1)Worked Example
How far has an ease transition got at half time? ease is cubic-bezier(0.25, 0.1, 0.25, 1), so the control points are P0 = (0, 0), P1 = (0.25, 0.1), P2 = (0.25, 1) and P3 = (1, 1). The curve is drawn by a parameter s from 0 to 1:
x(s) = 3(1 − s)²s × 0.25 + 3(1 − s)s² × 0.25 + s³
y(s) = 3(1 − s)²s × 0.1 + 3(1 − s)s² × 1 + s³
Time is x, so first solve x(s) = 0.5. That gives s = 0.6996. Then y(0.6996) = 0.8024: halfway through the duration the element is 80.2% of the way there. On a 400 ms transition, after 200 ms it has covered 80.2% of the distance; at three quarters of the time (s = 0.8739) it is at 96.0%.
An overshoot. cubic-bezier(0.34, 1.56, 0.64, 1) has y2 above 1. Its highest point is y = 1.0978 at 57.3% of the time, so a box scaling to 100% briefly reaches 109.8% before settling.
The common mistake: treating s as time. Putting s = 0.5 straight into y(s) gives 0.5375, which suggests ease is only 53.8% done at half time. But x(0.5) = 0.3125: s = 0.5 is the point reached after 31.25% of the duration, not 50%. Time is x, so x(s) has to be solved for s first, which is what browsers do and what Show Work below does.
Show Work
Formulas
From Car Bodies to CSS
Bézier curves were developed to describe car body shapes. Paul de Casteljau worked out the method at Citroën in 1959, but the company kept it private; Pierre Bézier published the same curves from Renault in the early 1960s for its UNISURF design system, and they carry his name. They later became the basis of PostScript, TrueType fonts and SVG paths.
In motion design, Robert Penner’s easing equations for Flash (2001) gave animators named curves such as ease-out and back. CSS Transitions, proposed by Apple’s WebKit team in 2007, took a simpler route: one cubic Bézier with fixed ends and two movable control points, plus five keywords. Curves with several bounces still needed keyframes until CSS Easing Level 2 added the linear() function, a list of points joined by straight lines, which shipped in Chrome 113 and Firefox 112 in 2023 and Safari 17.2 at the end of that year.
About This Tool
This editor draws the easing curve as an SVG you can drag and previews it with the browser’s Web Animations API, so the motion you see is the motion your CSS will produce. It solves the curve at a quarter, half and three quarters of the time, measures any overshoot or dip, and tells you when your numbers are the same as a CSS keyword.
The result copies as a transition or animation timing function, a CSS custom property or an element.animate() call, and the curve can be shared with ?c=0.34,1.56,0.64,1 in the URL. Everything runs in your browser.
Related tools: CSS Box-Shadow Generator, CSS Gradient Generator, and CSS clamp() Generator.
Frequently Asked Questions
What is a cubic-bezier easing curve?
It describes how an animated value moves over its duration. Time runs from 0 to 1 left to right and progress from 0 to 1 bottom to top. The curve starts at (0, 0), ends at (1, 1) and is bent by two control points, which are the four numbers in cubic-bezier(x1, y1, x2, y2). A straight diagonal is linear: equal progress in equal time.
What does the ease keyword actually equal?
ease is cubic-bezier(0.25, 0.1, 0.25, 1), the default for CSS transitions. It is fast early on: halfway through the duration the element is already 80.2% of the way there, and at three quarters it is 96.0%. ease-in is (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1) and ease-in-out (0.42, 0, 0.58, 1).
Why can the y values go above 1 or below 0?
Progress is allowed to overshoot. With cubic-bezier(0.34, 1.56, 0.64, 1) the value goes 9.8% past its target at 57% of the duration, then settles back. A y below 0 makes the element first move the wrong way, which animators call anticipation. The x values must stay between 0 and 1, because time cannot run backwards; browsers reject the value otherwise.
Can cubic-bezier make a bounce?
Only one overshoot. A cubic curve can cross its target once and come back, but a ball bouncing three times needs several separate curves. For that use keyframes with a timing function on each step, or the CSS linear() function, which takes a list of points and is supported in Chrome 113, Firefox 112 and Safari 17.2 onwards.
How do I use the result?
Paste it where CSS takes a timing function: transition-timing-function, animation-timing-function, or the shorthand, as in transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1). In JavaScript pass it as the easing option of element.animate(). It works in every current browser.
How do I use the Cubic-Bezier Easing Editor?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Menus and modals
An ease-out curve such as (0, 0, 0.58, 1) makes a panel arrive quickly and settle gently: 68.5% of the way at half the duration.
Playful buttons
cubic-bezier(0.34, 1.56, 0.64, 1) on a 200 ms scale makes a button pop 9.8% past full size and spring back.
Matching a design system
Type the four numbers from a motion spec and check the readouts and preview before handing it to developers.
Design tokens
Copy the curve as a CSS variable such as --ease-custom so every component uses the same motion.
Learning easing
Show Work solves the curve at a quarter, half and three quarters of the time, so you can see how the shape maps to motion.
Last updated: