CSS Cubic-Bezier Easing Editor

Visually edit a CSS cubic-bezier() timing function, see the curve and a live animation preview, and copy the value. Includes common presets.

x must stay in 0–1; y can overshoot (negative or >1) for bounce/back effects.

CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

About this tool

CSS transitions and animations use an easing function to control how speed changes over time, and cubic-bezier() gives you full custom control via four numbers — two control points (x1, y1, x2, y2) that bend a curve from start to finish. This editor lets you drag those values, draws the resulting curve, and plays a live animation of a dot moving with that timing so you can feel the difference between, say, ease-out and a springy back-out. The x values must stay between 0 and 1 (time cannot run backward), but the y values may go below 0 or above 1 to create overshoot and bounce effects. Presets for the standard keywords (ease, ease-in, ease-out, ease-in-out, linear) and a back-out spring give you a starting point to refine, then copy the value into your CSS transition or animation.

How to use it

  • Pick a preset or drag the x1/y1/x2/y2 sliders.
  • Watch the curve and click Preview animation to feel the timing.
  • Allow y to overshoot 0–1 for bounce/back effects.
  • Copy the cubic-bezier() value into your CSS.

Frequently asked questions

What is a cubic-bezier easing function?
It defines how an animation’s progress maps to time using a Bézier curve with two control points: cubic-bezier(x1, y1, x2, y2). The curve’s shape determines whether the motion starts slow, ends slow, accelerates, or overshoots.
What do the four numbers mean?
They are the coordinates of two control points: (x1, y1) and (x2, y2). X is time (0 to 1) and Y is progress. Pulling the points changes the curve’s steepness at the start and end, shaping the acceleration.
Why can y go outside 0 to 1 but not x?
X represents time, which must move forward monotonically from 0 to 1, so x is clamped to that range. Y represents progress and may overshoot below 0 or above 1 — that is exactly what produces bounce-back or anticipation effects.
How does this map to the CSS keywords?
The named easings are specific bézier curves: ease is cubic-bezier(0.25, 0.1, 0.25, 1), linear is (0, 0, 1, 1), ease-in-out is (0.42, 0, 0.58, 1), and so on. The presets here load those exact values.
Where do I use the value?
In the transition-timing-function or animation-timing-function property, e.g. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1). It applies to any animatable CSS property.
What makes a good easing for UI?
Most UI motion feels best with an ease-out (fast start, soft landing) so elements arrive quickly then settle. Reserve dramatic overshoot/back curves for playful accents; overusing bounce can feel sluggish or distracting.

Related tools