Cubic Bezier Editor

About this tool

The Cubic Bezier Editor provides an interactive SVG canvas for designing custom CSS cubic-bezier transition and animation easing curves. Drag the blue (P1) and orange (P2) control points to shape the curve, or type x1, y1, x2 and y2 into the number fields, and the curve redraws immediately. Click Preview animation to send a ball along a track for one second with that easing, so you can feel the motion as well as see the graph. Eight presets load a starting point: linear, ease, ease-in, ease-out, ease-in-out, spring, bounce and snappy. The output box shows the rule as transition-timing-function: cubic-bezier(x1, y1, x2, y2); and Copy CSS copies it in one line. Dragging keeps x between 0 and 1 and y between -2 and 2, so you can create overshoot and anticipation effects. Everything runs in your browser.

Why use it

• Interactive drag handles make curve design intuitive without manual value entry.

• On-demand animation preview shows the real motion feel of the curve, not just the static graph.

• Presets include the five CSS named easings plus spring, bounce and snappy curves.

• Shows P1 and P2 coordinates numerically so you understand the curve mathematically and can communicate values precisely.

How to use

1. Drag the blue (P1) and orange (P2) control points on the canvas to shape the curve.
2. Click Preview animation to watch a ball move across the track with the current easing.
3. Click a preset (linear, ease, ease-in, ease-out, ease-in-out, spring, bounce, snappy) to start from a known curve.
4. Type values into the x1, y1, x2 and y2 fields if you have a target spec; keep x1 and x2 between 0 and 1.
5. Click Copy CSS to copy the transition-timing-function declaration for your stylesheet.

When it helps

• Designing custom easing for UI transitions and animations.
• Matching a specific feel (bounce-like start, snappy end) to user expectations or brand motion guidelines.
• Replacing named easings with custom curves for more precise motion design.
• Learning how Bezier curves control the velocity profile of CSS transitions.
• Designing custom easing for UI transitions (modals, drawers, tooltips) and animations.

Examples

Preset: ease

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

x1 0.4, y1 0, x2 0.2, y2 1

transition-timing-function:
  cubic-bezier(0.4, 0, 0.2, 1);

Preset: spring

transition-timing-function:
  cubic-bezier(0.175, 0.885, 0.32, 1.275);

x1 0, y1 0, x2 0.2, y2 1

transition-timing-function:
  cubic-bezier(0, 0, 0.2, 1);

Tips

• Most UI motion looks best with a slight overshoot at the end — pull P2's y above 1 for a soft bounce.
• ease-out (0.0, 0.0, 0.58, 1.0) is the most natural feel for entrances; ease-in suits exits.
• Avoid linear() for UI — it feels mechanical. Reserve it for progress bars and looping animations.
• Keep transition durations short (150-300ms) for utility actions, longer (400-600ms) for storytelling motion.
• If the curve goes flat in the middle, animation will appear to pause — usually undesirable. Keep the slope monotonically increasing for natural feel.
• The Material Design 'standard' curve is cubic-bezier(0.4, 0.0, 0.2, 1) — a great starting point for emphasized motion.

Frequently Asked Questions

Glossary

Cubic Bezier curve

A parametric curve defined by 4 points: two anchor points and two control points. CSS uses cubic Beziers with anchors fixed at (0,0) and (1,1).

cubic-bezier() function

CSS timing function: cubic-bezier(x1, y1, x2, y2) where x1/y1/x2/y2 are the two control-point coordinates. Used in transition-timing-function and animation-timing-function.

Easing

The mathematical curve that maps animation progress (time) to output progress (value). Easing controls perceived speed and feel of motion.

Linear easing

cubic-bezier(0, 0, 1, 1) — constant speed throughout. Useful for progress bars and continuous loops; feels mechanical for UI.

Ease-in

Starts slowly and accelerates. CSS keyword maps to cubic-bezier(0.42, 0, 1, 1). Suits exit animations.

Ease-out

Starts quickly and decelerates. CSS keyword maps to cubic-bezier(0, 0, 0.58, 1). Suits entrance animations.

Overshoot

When y2 > 1 or y1 < 0, the curve passes outside the 0-1 range, producing a spring or bounce feel as the animated value briefly exceeds its target.

Velocity profile

The first derivative of the easing curve. Tall sections indicate acceleration; flat sections indicate constant speed; dips show deceleration.