CSS Cubic Bezier Easing Editor

Drag control points on the curve canvas or type values. Preview your easing with a live animation.

Drag the colored dots to edit the curve

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

Animation Preview

Drag the control points on the canvas, or enter values in the fields above.

How to Use the Cubic Bezier Editor

  1. Drag the colored dots on the canvas — green dot controls P1 (x1, y1) and orange dot controls P2 (x2, y2).
  2. Type values directly in the coordinate inputs for precision. X values must be 0–1; Y values can exceed this range for overshoot effects.
  3. Use presets — select the CSS Named or Presets tab to quickly load standard or popular custom curves.
  4. Play the animation — click Play to see a ball slide across the track using your current easing.
  5. Copy the value — click Copy Value to grab the cubic-bezier() CSS string.

Understanding Cubic Bezier Curves

In CSS, timing functions describe how a transition or animation progresses over time. A cubic bezier curve is defined by four control points: the fixed start (0, 0) and end (1, 1), plus two user-defined intermediate points P1 (x1, y1) and P2 (x2, y2). The horizontal axis (x) represents elapsed time as a fraction from 0 to 1, and the vertical axis (y) represents the animated value's progress from start to end.

By moving the control points, you change the shape of the S-curve and thus the speed profile of the animation. A point pulled toward the top-left creates a fast start. A point pulled toward the bottom-right creates a slow start and fast end. Points with Y values outside 0–1 create overshoot, where the property temporarily exceeds its target value — perfect for spring and elastic effects.

CSS Named Easing Functions

  • ease cubic-bezier(0.25, 0.1, 0.25, 1) — starts and ends slowly, fastest in the middle. The browser default.
  • ease-in cubic-bezier(0.42, 0, 1, 1) — starts slowly, ends quickly. Good for elements exiting the screen.
  • ease-out cubic-bezier(0, 0, 0.58, 1) — starts quickly, ends slowly. Most natural for entering elements.
  • ease-in-out cubic-bezier(0.42, 0, 0.58, 1) — slow start, fast middle, slow end. Polished and symmetrical.
  • linear cubic-bezier(0, 0, 1, 1) — constant speed. Good for infinite rotations and progress bars.

Custom Preset Curves

  • Spring cubic-bezier(0.34, 1.56, 0.64, 1) — slight overshoot at the end, like a spring settling.
  • Elastic cubic-bezier(0.68, -0.55, 0.265, 1.55) — overshoots both start and end for a playful elastic feel.
  • Snap cubic-bezier(0.19, 1, 0.22, 1) — very slow start, then rockets to the end. Feels snappy and satisfying.
  • Smooth cubic-bezier(0.25, 0.46, 0.45, 0.94) — a refined ease-out for UI elements in design systems.
  • Bounce cubic-bezier(0.87, 0, 0.13, 1) — dramatic slow start and slow end with a very fast middle.

transition-timing-function vs. animation-timing-function

Both accept the same cubic-bezier values, but they work differently. transition-timing-function applies to a CSS transition and governs the entire transition from start to end. animation-timing-function in @keyframes applies per-keyframe segment — if you have keyframes at 0%, 50%, and 100%, the easing applies separately to the 0→50% segment and the 50→100% segment. This allows complex multi-step easing by composing simpler curves.

When to Use Which Easing

The Material Design and Apple HIG guidelines offer useful guidance: use ease-out for elements entering the viewport (they decelerate as if stopping naturally), use ease-in for elements leaving the viewport (they accelerate away), use ease-in-out for elements moving within the viewport (symmetric start/end deceleration), and use linear for continuous looping animations. For micro-interactions like button presses and toggles, spring or elastic easings add personality. For productivity and utility interfaces like DevToolbox, subtle easings are preferable to prevent distraction. See all CSS tools at DevToolbox.

Frequently Asked Questions

cubic-bezier() is a CSS timing function that defines the speed curve of an animation or transition. It takes four values — x1, y1, x2, y2 — representing the control points of a bezier curve between (0,0) and (1,1). The x axis represents time and the y axis represents progress/value.
CSS has five named easing functions: ease (cubic-bezier(0.25,0.1,0.25,1)), ease-in (cubic-bezier(0.42,0,1,1)), ease-out (cubic-bezier(0,0,0.58,1)), ease-in-out (cubic-bezier(0.42,0,0.58,1)), and linear (cubic-bezier(0,0,1,1)).
Yes. The y1 and y2 control points can go outside the 0–1 range to create overshoot effects (like a spring or bounce). Values below 0 or above 1 cause the animated property to temporarily go beyond its start or end value. However, the x1 and x2 values must stay within 0–1.
A simple bounce can be approximated with cubic-bezier(0.34, 1.56, 0.64, 1) — the y1 value of 1.56 causes the element to overshoot its target before settling back. For a true multi-bounce effect, you need to use CSS animations with multiple keyframes instead of a single transition.
Both properties accept the same cubic-bezier() values. transition-timing-function applies to CSS transitions (property changes triggered by state changes like :hover). animation-timing-function applies to @keyframes animations and applies per keyframe segment, not to the whole animation duration.