CSS Cubic Bezier Easing Editor

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

Last reviewed: April 2026
Reviewed by , software engineer · last updated April 2026

New to this tool? Click here for instructions

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

The CSS Cubic Bezier Easing Editor allows you to visually edit cubic-bezier() curves for CSS animations. To use the editor, simply drag the colored dots on the canvas to adjust the control points (P1 and P2). Alternatively, you can type values directly into the coordinate inputs for precision. 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 can change the shape of the S-curve and thus the speed profile of the animation.

When to Use the Tool in Real Workflows

The CSS Cubic Bezier Easing Editor is ideal for designers and developers who need to create smooth and natural animations on their websites. It's particularly useful when you want to fine-tune the timing of CSS transitions and animations to achieve the desired effect. Whether you're working on a website, an app, or a game, this tool can help you create visually appealing and user-friendly animations.

How It Works

The editor uses a simple interface to allow you to visually edit cubic-bezier() curves. You can drag the control points (P1 and P2) on the canvas to adjust the shape of the curve. The editor also provides a live preview of the animation, so you can see how the changes you make affect the timing of the animation. Additionally, the editor offers a range of pre-defined easing functions, such as ease, ease-in, ease-out, and ease-in-out, which you can use as a starting point for your custom curves.

Tips, Edge Cases, and Limitations

When using the CSS Cubic Bezier Easing Editor, it's important to keep in mind that the editor only provides a visual interface for editing cubic-bezier() curves. You will still need to apply the resulting CSS code to your website or application. Additionally, the editor does not provide any advanced features, such as keyframe animations or complex easing functions. If you need more advanced animation capabilities, you may want to consider using a dedicated animation library or framework.

Frequently Asked Questions

cubic-bezier() is a CSS function that defines a cubic Bézier curve, which is used to control the timing of CSS transitions and animations. The 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 default CSS easing function is ease, which starts and ends slowly, fastest in the middle. Other common easing functions include ease-in, ease-out, and ease-in-out.
Yes, the y values of cubic-bezier() can exceed 0 to 1. This allows for overshoot effects, which can be used to create spring or elastic effects.
To create a bounce effect with cubic-bezier(), you can use a custom preset curve, such as the Bounce preset. This preset has a dramatic slow start and slow end with a very fast middle, which creates a bouncing effect.
The transition-timing-function property applies to the transition of all CSS properties other than the 'width', 'height', 'top', 'right', 'bottom', 'left', 'margin', 'padding', and 'border-size' properties. The animation-timing-function property applies to the animation of all CSS properties.

Quick reference

CSS Cubic Bezier Easing Editor Quick Reference
Parameter Description Common Values Comparison
P0 Start point (always (0,0)) (0,0) Fixed anchor point for animation start
P1 First control point (influences start curve) (0.42, 0.0) Common default for smooth acceleration
P2 Second control point (influences end curve) (0.58, 1.0) Common default for smooth deceleration
P3 End point (always (1,1)) (1,1) Fixed anchor point for animation end
ease-in Starts slow, ends fast cubic-bezier(0.42, 0, 0.58, 1) Standard for gradual acceleration
ease-out Starts fast, ends slow cubic-bezier(0, 0.58, 1, 0.42) Standard for gradual deceleration

Example walk-through

Worked example: step-by-step

Step 1. Open the CSS Cubic Bezier Easing Editor and input the control points for the easing function. For example, use the values 0.4, 0, 0.2, 1 to create a smooth acceleration curve.

Step 2. Select the target CSS property (e.g., transition-timing-function) and apply the generated cubic-bezier function to an HTML element. Ensure the element has a defined duration, such as transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);.

Step 3. Adjust the control points step by step to observe how the easing curve visually transforms. For instance, changing the first value from 0.4 to 0.6 will create a more pronounced acceleration effect.

Step 4. Validate the output by animating the element. The expected result is a smooth transition with the custom easing curve, demonstrating the cubic-bezier function's impact on motion timing.

/* Sample input */
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);

/* Expected output */