CSS Cubic Bézier Editor

Shape a CSS cubic-bezier() curve visually, compare its motion with linear easing, and copy transition CSS. All editing stays in your browser.

Shape the motion

ease

Drag handles 1 and 2, or nudge with arrow keys by 0.01; Shift + arrow moves by 0.1. The dashed line is linear.

Control point 1

x1 timey1 progress

Control point 2

x2 timey2 progress

x: 0–1. y: −10–10 (editor limit); values outside 0–1 can create overshoot. Inputs stay in your browser.

Feel the difference

600 ms

Same distance, same duration. Compare your curve with constant speed.

Your curve

linear

Duration

The preview never plays automatically.

Bring it to your UI

Timing function

cubic-bezier(0.25, 0.1, 0.25, 1)

CSS with the current duration

transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);

The preview uses native browser animation. Check distance, triggers and reduced-motion settings in your real component.

How to use this tool

Choose a preset, drag either control point or edit its coordinates, then play once to compare the motion. Copy the curve or a transition rule and test it on your real component.

When not to use it

This editor handles one cubic Bézier easing curve, not keyframes, steps(), linear() point lists or spring physics. A motion preview does not establish accessibility for a complete interface.

Read the guide →