LocalToolsOffline browser tools collection

Category: Developer tools

Cubic Bezier Generator

System ideaMissing a tool?

Design a custom CSS easing curve

Drag two control points to shape a cubic-bezier() timing function, watch the curve and a moving preview update live, and copy the finished animation-timing-function declaration. The curve is computed in your browser.

Preset

Progress at 50% of the duration: 0.802

Output
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

A CSS transition or animation's easing is a cubic bezier curve from (0,0) to (1,1): the two points in between decide whether motion starts slow and finishes fast, overshoots, or something else entirely. The named keywords (ease, ease-in-out and so on) are only five fixed points on that space. This tool plots the curve from the two control points you set, shows a box moving with that exact timing function, and reports how far through the motion the eased progress is at the halfway mark — the number that is hardest to picture from the curve alone.

How to use it

  1. Start from a preset or set the two control points directly.
  2. Watch the curve and the moving preview update.
  3. Copy the cubic-bezier() declaration into your transition or animation.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Is anything computed on a server?
No. The curve, the moving preview and the progress figure are all computed by JavaScript running in the page.
Why are the two X values limited to between 0 and 1?
X represents elapsed time, which the CSS specification requires to run forward from 0 to 1 for the curve to stay a valid function of time. Y is the eased progress and is allowed to go below 0 or above 1, which is how an overshoot or a bounce is built.
What does the halfway-mark figure mean?
It is the eased progress — not the straight-line progress — at the moment exactly half the animation's duration has elapsed. A value above 50% there means the motion is already ahead of a linear pace by the midpoint.

Back to all tools