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);
General calculation reads
Amazon affiliateAs an Amazon Associate we may earn from qualifying purchases. This does not add cost for you.
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.