HIFreeTools
ENES

Free Cubic Bezier Generator

Build and visualize CSS cubic-bezier() easing curves with four control values, a live curve preview, ready-made presets, and one-click copyable output.

Presets
timing-function
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
cubic-bezier(0.25, 0.1, 0.25, 1)
Live preview (hover to play)

The square moves left to right using your easing curve. Hover the bar to replay.

Quick answer

A cubic-bezier generator turns four numbers (x1, y1, x2, y2) into a CSS cubic-bezier() timing function and draws the matching easing curve. The X values must stay between 0 and 1, while Y values may exceed that range to create bounce or anticipation. Copy the result straight into transition-timing-function or animation-timing-function.

Formula & method

The curve is a parametric cubic Bezier with fixed endpoints P0 = (0, 0) and P3 = (1, 1) and two adjustable control points P1 = (x1, y1) and P2 = (x2, y2). For a parameter t from 0 to 1, the point is B(t) = (1-t)^3·P0 + 3(1-t)^2·t·P1 + 3(1-t)·t^2·P2 + t^3·P3. The X axis represents animation progress (time) and the Y axis represents the eased output. CSS requires x1 and x2 to lie in [0, 1] so the curve is a valid function of time, but y1 and y2 are unbounded, which is how overshoot easings like back-out are made. The tool clamps X inputs to [0, 1], leaves Y free, plots the curve and its control handles in an SVG, and emits cubic-bezier(x1, y1, x2, y2) with trailing zeros trimmed.

Examples

Example 1: The built-in ease curve
Input
x1=0.25, y1=0.1, x2=0.25, y2=1
Result
cubic-bezier(0.25, 0.1, 0.25, 1)
Why
This is the exact definition of the CSS keyword ease. It starts gently, accelerates, then settles. At the halfway point in time (x=0.5) the eased output is already about 0.80, so most visual movement happens in the first half.
Example 2: Symmetric ease-in-out
Input
x1=0.42, y1=0, x2=0.58, y2=1
Result
cubic-bezier(0.42, 0, 0.58, 1)
Why
A symmetric S-curve: slow start, fast middle, slow finish. Because it is symmetric, the output is exactly 0.5 at the time midpoint (x=0.5), making it ideal for balanced open/close transitions.
Example 3: Linear (no easing)
Input
x1=0, y1=0, x2=1, y2=1
Result
cubic-bezier(0, 0, 1, 1)
Why
With both control points on the diagonal, output equals progress, so y=x at every point (y=0.3 at x=0.3). This reproduces the linear timing keyword and is useful for constant-speed loops like spinners.
Example 4: Overshoot / back-out with y beyond 1
Input
x1=0.34, y1=1.56, x2=0.64, y2=1
Result
cubic-bezier(0.34, 1.56, 0.64, 1)
Why
The y1 value of 1.56 pushes the curve above 1, so the element overshoots its target and springs back. X values stay within 0 and 1 to remain valid, but Y is intentionally out of range to create the bounce.

When to use this tool

  • Designing a custom CSS transition or @keyframes animation that needs a feel the built-in ease, ease-in, ease-out, and linear keywords cannot provide.
  • Recreating a bounce, spring, or anticipation effect by pushing the Y control values above 1 or below 0.
  • Matching a motion spec from a designer who provided exact cubic-bezier numbers and you want to preview the curve before shipping.
  • Teaching or learning how easing curves map progress (time) to output so you can read and tweak timing functions confidently.

Common mistakes

  • Setting x1 or x2 outside the 0 to 1 range. CSS rejects the whole declaration if either X control point is below 0 or above 1; this tool clamps X for you, but hand-written values will silently break the animation.
  • Trying to push y1 or y2 out of range expecting an error. Y values are allowed to exceed [0, 1] on purpose; that is exactly how you create overshoot and anticipation, not a bug.
  • Confusing the X axis with the Y axis. X is time/progress and Y is the eased value, so a steep section means fast motion, not a larger movement distance.
  • Forgetting that cubic-bezier replaces the keyword, not adds to it. Use transition-timing-function: cubic-bezier(...) instead of leaving a stray ease keyword that overrides it.
  • Expecting four-point control of both ends independently. The endpoints are locked at (0,0) and (1,1); only the two middle control points are editable.

Frequently asked questions

What is a cubic-bezier() function in CSS?

It is a timing function that defines how a transition or animation speeds up and slows down. You supply four numbers, cubic-bezier(x1, y1, x2, y2), which place two control points between the fixed start (0,0) and end (1,1) of the curve. The shape of that curve determines the easing.

Why must x1 and x2 stay between 0 and 1?

The X axis represents time, which must move forward monotonically from 0 percent to 100 percent. Keeping x1 and x2 in [0, 1] guarantees the curve is a valid function of time. Values outside that range make the declaration invalid and CSS ignores it.

Can y1 and y2 be greater than 1 or negative?

Yes. Y values are intentionally unbounded. A y value above 1 makes the element overshoot its target and spring back, while a negative y value makes it pull back before moving forward (anticipation). This is the standard way to build bounce easings.

How do the keywords ease, ease-in, and ease-out map to cubic-bezier?

ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is cubic-bezier(0.42, 0, 1, 1), ease-out is cubic-bezier(0, 0, 0.58, 1), ease-in-out is cubic-bezier(0.42, 0, 0.58, 1), and linear is cubic-bezier(0, 0, 1, 1). Selecting a preset in this tool loads these exact values.

Where do I paste the generated value?

Use it as the value of transition-timing-function or animation-timing-function, for example transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1). You can also use it directly inside the transition shorthand after the duration.

Does this tool send my values to a server?

No. The curve is drawn and the CSS string is generated entirely in your browser with JavaScript and inline SVG. Nothing is uploaded, so it works offline and keeps your work private.

Why does my curve look like it dips below the box?

That happens when a Y control value is negative or above 1. The preview pads the drawing area so this overshoot is visible. It is valid CSS and produces a spring or anticipation effect, not an error.

Sources & references

External references open in a new tab. We are independent and not affiliated with these organizations.

  • ✓ Free to use
  • ✓ No sign-up required
  • ✓ Runs entirely in your browser — nothing is uploaded.
  • ✓ Formula and method shown above
Last updated: How we calculateReport a correctionDisclaimer

Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.

Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.

Related tools

Embed this tool on your site

Free to embed, no sign-up. Paste this code where you want the cubic bezier generator to appear: