Overview
Set the four control-point numbers (x1, y1, x2, y2) of a CSS `cubic-bezier()` timing function and see the resulting curve drawn on an SVG graph from (0,0) to (1,1), alongside an animated block that actually moves using the generated timing function so you can feel the easing, not just see its shape. The x1 and x2 values are control-point X coordinates and are validated to the 0-1 range the CSS spec requires; y1 and y2 are deliberately NOT restricted to that range, since Y values outside 0-1 are what produce a legitimate, commonly-used "overshoot" or bounce curve - clamping them would silently break that valid case. Five standard presets (ease, ease-in, ease-out, ease-in-out, and linear) are included with their exact spec values, and linear is clearly called out as not actually being a cubic-bezier() form at all - it's CSS's own separate keyword for a straight-line timing function. The animated preview checks and respects your system's "prefers-reduced-motion" setting and disables itself when that preference is on. Runs entirely client-side.
Best for: Designing a custom CSS transition or animation easing curve, including bounce/overshoot effects
How to use this tool
- Pick a preset or set control points. x1/x2 are clamped to 0-1; y1/y2 can go outside 0-1 for overshoot.
- Read the curve graph. The SVG graph shows the curve shape and both control points.
- Watch the animated preview. A block animates using the exact generated timing function; respects prefers-reduced-motion.
- Copy the CSS. Grab the finished transition-timing-function declaration.
Frequently asked questions
That asymmetry comes directly from the CSS spec: x represents time/progress and must stay within the 0-1 range for cubic-bezier() to be valid, while y represents the animated value and is explicitly allowed outside 0-1 - that is exactly what produces an overshoot or bounce curve. Clamping y would make that legitimate effect impossible to create here.
Visually similar but not the same thing technically - "linear" is its own distinct CSS timing-function keyword for a constant-rate straight line, not a cubic-bezier() function call. This tool keeps that distinction explicit rather than presenting linear as a disguised bezier preset.
Yes - it checks the "prefers-reduced-motion" system setting and disables the moving block animation entirely when that preference is on, while still showing the static curve graph and generated CSS.