Cubic-Bezier Easing Editor

Every CSS transition and animation has a timing function that tells the browser how fast to go at each moment. The default ease and its siblings cover most needs, but a button that snaps, a drawer that overshoots slightly or a card that eases like a physical object needs a custom curve. cubic-bezier() takes four numbers, the two control points of a Bézier curve, and this editor lets you see and drag the curve instead of guessing the numbers.

Reading the plot

The horizontal axis is time from 0 to 1, the vertical axis is progress from 0 to 1. A straight diagonal is linear: constant speed. A curve that rises steeply at the start means a fast start, and a flat end means the motion eases to a stop. The two round handles are the control points (x1, y1) and (x2, y2); the curve always begins at the bottom left and ends at the top right, and the handles pull it towards them. Because time cannot run backwards, both x values must stay between 0 and 1. The y values may go beyond, which is how overshoot works.

A worked example

Press Sample to load easeInOutBack, which is cubic-bezier(0.68, -0.6, 0.32, 1.6). The first handle sits below the baseline, so the element first moves backwards a little, an anticipation, then races forward and overshoots the end before settling. At a quarter of the time the progress is about -0.098, so the element has pulled back by roughly 10% of its distance. The side panel shows the numbers for each handle and the plot draws the dip and the bulge. The CSS box shows animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); and a matching transition: transform 800ms ... line. Press Play and the circle slides along the track with that easing.

The named easings

The list includes the CSS keywords. ease is cubic-bezier(0.25, 0.1, 0.25, 1), and at half the time it has covered about 80.2% of the distance, because it starts quickly. ease-out is cubic-bezier(0, 0, 0.58, 1) and covers about 68.5% by half time. ease-in is cubic-bezier(0.42, 0, 1, 1), slow at first, and ease-in-out combines both. The 24 curves from easings.net give familiar families: sine is gentle, quad and cubic stronger, expo and circ dramatic, and back adds overshoot.

Using a curve in CSS

Use ease-out style curves for things entering the screen, because they arrive fast and settle, and ease-in styles for things leaving. Keep interface transitions short, usually 150 to 400 milliseconds, and save long ones for large movements. The duration slider changes the preview and the generated transition line. If you already have a curve in a design file, paste it into the box; the page accepts cubic-bezier(...) and the five keywords and reports a clear error for an x value outside 0 to 1 or the wrong number of arguments.

Edge cases

Browsers reject a cubic-bezier() whose x values are out of range and fall back to the initial value, so the animation silently becomes ease. Overshoot only shows on properties that can go beyond their end value, such as transform; it does nothing visible on opacity, which is clamped. Very slow starts can make animations feel delayed, so check the time to first visible movement.

Limits

The editor makes cubic Bézier curves only; steps() and the newer linear() function with many stops are not generated. The preview is a simple CSS animation of one circle and says nothing about performance. Everything runs in your browser.

Related tools

• SVG Bezier Curve Editor uses the same cubic curves for shapes.
• CSS Gradient Generator animates colours that can use these curves too.
• Box Shadow Generator pairs shadows with hover transitions.
• CSS Clamp Calculator covers fluid sizes rather than motion.