Drag control points to create custom cubic-bezier timing functions with comparison to standard easing presets.
Cubic Bezier Easing Editor turns two movable control points into a CSS cubic-bezier() timing function and compares its curve with standard easing presets. Dragging a point changes how quickly normalized progress advances between the fixed start at (0, 0) and end at (1, 1). The common misconception is that the graph describes an element's spatial path. It does not. The curve maps elapsed-time progress on the horizontal axis to output progress on the vertical axis.
A concrete input and expected output from the current implementation.
Input
First control point: (0.25, 0.1) Second control point: (0.25, 1)
Expected output
cubic-bezier(0.25, 0.1, 0.25, 1)
The four arguments are the x and y coordinates of the first control point followed by those of the second. These coordinates exactly match the CSS easing keyword ease.
The curve has fixed endpoints at (0, 0) and (1, 1). Its two editable control points determine the curve between them. For a given normalized time on the x-axis, the corresponding y-value supplies the eased progress. Moving a control point therefore changes acceleration and deceleration without changing the animation's declared duration.
Comparing the custom curve with standard presets reveals whether progress begins or ends more gradually than a familiar easing. The resulting four-number expression can be used anywhere CSS accepts a cubic-bezier() easing function, including transition-timing-function and animation-timing-function. The comparison concerns curve shape, not the duration or distance of a particular transition.
Yes, when a control point's y-coordinate lies below 0 or above 1, the eased progress can temporarily fall outside the normal output range. Whether that creates a visible overshoot depends on the animated property's interpolation. It does not extend the animation duration, and some properties may make the effect less obvious.
No. A cubic-bezier easing function controls how progress changes over time, not where an element travels. Use it to alter the pacing of a transform, opacity change, or other interpolated property. A spatial curve requires a separate path mechanism, such as CSS motion-path, SVG path animation, or coordinated transform values.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.