Skip to main content
CompressNConvert

Cubic Bezier Easing Editor

Edit cubic-bezier control points, compare easing curves with linear motion, and adjust duration. Copy a CSS timing function, transition, or JS curve.

Runs locally in your browser

Curve

Drag either handle. The dotted square is the unit interval.

Time →↑ Progress

cubic-bezier(0.34, 1.56, 0.64, 1)

Motion preview

Your curve on top, a linear reference underneath.

Your curve

Linear reference

On a scaling element

Dialog

Presets

Generated code

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

Complete tool guide

Cubic Bezier Easing Editor guide

Edit a cubic-bezier timing function for CSS transitions and animations. Drag the two control points, compare the motion with a linear reference, and adjust duration before copying the timing function, transition, or JavaScript control-point array.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

  • Compare how a curve starts and settles without guessing its coordinates.
  • Separate animation duration from the shape of the easing curve.
  • Reuse a small set of motion curves across interface components.

Common use cases

  • Giving a design system one consistent motion vocabulary
  • Replacing the default ease with something that matches a brand
  • Building an overshoot for a modal, toast, or drawer entrance
  • Matching a motion spec handed over from a designer

How to use it

  1. 1

    Start from a preset that is close to what you want.

  2. 2

    Drag either handle to reshape the curve.

  3. 3

    Set the duration and watch the preview bars against the linear reference.

  4. 4

    Copy the timing function, transition, or JavaScript form.

Controls and results explained

Control points

The four values are x1, y1, x2, y2. The x coordinates must stay between 0 and 1 for valid CSS; y coordinates may extend outside that interval.

Duration

Duration sets how long one transition takes. Changing it does not change the exported cubic-bezier coordinates.

Presets and comparison

Start with ease-in, ease-out, or ease-in-out, then compare it with linear motion. Overshoot presets can move progress beyond its final value.

Worked examples

Create a drawer entrance

Start with: The ease-out preset

  1. Select ease-out and try a 250ms duration.
  2. Copy the timing function.
cubic-bezier(0, 0, 0.58, 1)

This is the CSS ease-out curve. Apply it to the property and duration you intend to transition; the curve does not open the drawer by itself.

Create an accelerating exit

Start with: The ease-in preset

  1. Select ease-in and compare it with the linear reference.
  2. Copy the timing function for your exit transition.
cubic-bezier(0.42, 0, 1, 1)

Progress starts slowly and accelerates toward the endpoint. The appropriate duration depends on distance and interaction context.

Reading the graph

Horizontal position represents elapsed time and vertical position represents progress. The endpoints stay at (0,0) and (1,1); control points change the route between them.

Choosing an entrance or exit

An ease-out curve can help an entering element arrive quickly and settle. Ease-in can suit an exit that accelerates away. These are design starting points; test the distance and duration together.

Reduced motion

Respect prefers-reduced-motion in the consuming interface. Reduce or remove nonessential movement while preserving clear state changes. A timing function alone does not implement that preference.

Practical tips for better results

  • Try a short duration for a small interface movement and adjust after testing the full interaction.
  • Compare curves at the same duration to isolate their effect.
  • Avoid overshoot on reading surfaces when the movement makes content difficult to follow.

Frequently asked questions

Is cubic-bezier the same as a spring animation?

No. A cubic-bezier timing function maps a fixed duration to progress. A spring model describes a different motion system and may react to interruption or velocity.

Why is the overshoot invisible when animating opacity?

Opacity is clamped to its allowed range. A curve can exceed normal progress while the animated property cannot visibly exceed its limits.

Does the exported curve include reduced-motion support?

No. Add a prefers-reduced-motion rule or equivalent application behavior where you use the animation, and verify that state changes remain understandable.

What to check before using the result

  • A single cubic-bezier segment cannot reproduce every bounce or spring trajectory.
  • The preview illustrates timing. It does not reproduce the layout, performance, or interruption behavior of your actual component.

Keep working

Related color & design

Continue with another focused tool from the same collection.

CSS Gradient GeneratorBuild linear, radial, and conic gradients with draggable multi-stop control.CSS Box Shadow GeneratorStack multiple shadow layers and drag the light direction on a live preview.CSS Text Shadow GeneratorLayer text shadows for glow, outline, letterpress, and long-shadow effects.CSS Border Radius GeneratorDrag handles to shape corners, from rounded boxes to organic blob shapes.