Loading Techie Utils…

CSS Cubic Bezier Generator

Plot an easing curve and feel what it does. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.

About Cubic Bezier Editor

An easing curve is a graph of progress against time, and the four numbers in cubic-bezier() are two control points that bend it. Plotted and animated together, the relationship stops being abstract: the steeper the curve at a point, the faster the thing is moving at that moment.

The CSS keywords are just named curves. ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in-out is (0.42, 0, 0.58, 1), and linear is the diagonal. Selecting them here shows what each one actually does, which is usually enough to explain why ease-in feels wrong for something arriving on screen — it starts slow, and an object appearing should already be moving.

The y values are not limited to the 0–1 range, and that is where the interesting curves live. A y above 1 overshoots the target and settles back, which reads as weight and momentum; a y below 0 pulls backwards before moving forwards, which reads as anticipation — the wind-up before a throw. Both only work on properties that can pass their target and return: transform and opacity can, width and color visibly cannot.

What a bezier cannot do is bounce or oscillate. A curve defined by two control points crosses any progress value at most a couple of times, so a spring that wobbles three times before settling needs linear() with sampled points, or keyframes, or a physics-based library.

Where it helps

  • Plots the curve and animates an element with it at the same time, so the graph and the feel are connected.
  • Includes the curves behind the CSS keywords and the Material motion set, which is usually where a choice starts.
  • Reports overshoot and anticipation as numbers, so a curve that leaves the 0–1 range does not surprise you later.
  • Tabulates progress against time, which is what you need when matching an animation to something else on the page.
  • Runs entirely in your browser.

Limits

  • A cubic bezier cannot bounce or oscillate. Anything springy needs linear() with sampled points, keyframes, or a spring implementation.
  • Curves that leave the 0–1 range are unusable on properties that cannot pass their target — colour, width and height among them.
  • The x values are clamped to 0 and 1 because time cannot run backwards, which CSS also enforces.
  • A curve judged on a moving box may feel different applied to opacity, colour or a large layout change.
  • There is no drag-the-handles editor here; the control points are typed as numbers.

Frequently asked questions

What do the four numbers mean?

They are two control points, (x1, y1) and (x2, y2). The curve always starts at (0,0) and ends at (1,1); x is elapsed time and y is progress. Pulling a control point up makes the animation move faster at that part of its duration, and pulling it right delays it.

Why can y go above 1 but x cannot?

Because y is progress and x is time. Overshooting the destination and coming back is a real motion; running time backwards is not, so CSS clamps x to the 0–1 range and leaves y alone.

Which easing should I use by default?

Something like ease-out for anything entering or responding to a click — it starts fast, so the interface feels immediate — and ease-in for things leaving. ease-in-out suits movement between two on-screen positions. linear is right for spinners and progress bars, and wrong for almost everything else.

How do I make a bouncy spring?

Not with a cubic bezier — two control points cannot oscillate. Use linear() with sampled values, keyframes with several stops, or a spring animation from a motion library. A single overshoot is as close as a bezier gets, and for most interface work it is enough.

Related tools

More Colors & Design tools