CSS Easing Function Editor

The CSS Easing Function Editor is a free, browser-based visual tool for designing cubic-bezier() easing curves used in CSS transitions and animations. Instead of guessing control point values, you can drag two handles on an interactive graph to shape your curve precisely and see the resulting motion in real time.

CSS transitions and animations accept a timing-function that controls how the intermediate values of a property change over time. The cubic-bezier(x1, y1, x2, y2) function defines a curve between two fixed endpoints — (0, 0) representing the start of the animation and (1, 1) representing its end. The two control points (x1, y1) and (x2, y2) determine the shape of the curve and therefore the "feel" of the animation: whether it starts slowly and accelerates, overshoots the target and bounces back, or transitions at a constant speed.

This editor comes with over 20 built-in presets grouped by category — standard CSS keywords like ease, ease-in, and ease-in-out; easing families such as Quadratic, Cubic, Quartic, and Exponential; overshoot curves (Back); and Material Design motion curves. Selecting a preset instantly loads its values and displays the curve.

The comparison mode lets you overlay a second easing curve (shown in red) on the same graph so you can visually compare how two different timing functions behave. Both curves animate simultaneously in the preview bar below the graph. This is especially useful when deciding between subtle variations — for example comparing ease-in-out against the Material Standard curve.

All processing happens entirely in your browser — no data is sent to any server. The generated CSS properties include transition-timing-function, animation-timing-function, and a full transition shorthand with the configured duration. You can pair this tool with the CSS Animation Generator to build complete keyframe animations, or use the Color Converter when fine-tuning the colors in your animated elements. For layout-related transitions, the CSS Layout Generator can help structure the elements you intend to animate.

1. Drag the control points on the graph — the blue point is P1 (x1, y1) and the green point is P2 (x2, y2). The curve updates in real time.
2. Alternatively, type exact values into the x1, y1, x2, y2 input fields below the graph.
3. Browse the Presets panel on the right and click any preset to load its values instantly.
4. Adjust the Duration slider to set the animation length from 100 ms to 3000 ms.
5. Click Play to see the easing applied to a moving box in the preview area. Click again to stop.
6. Enable Compare mode to overlay a second easing curve (red) and animate both side by side.
7. Click the Copy button next to any output line, or press Ctrl+Shift+C to copy the cubic-bezier() value to your clipboard.