Cubic Bezier Generator

The Cubic Bezier Generator is a free, browser-based editor for building custom cubic-bezier() easing curves for CSS transitions and animations. You drag two control-point handles on the curve, watch a demo element move with that exact easing, and copy the ready-to-use cubic-bezier(x1, y1, x2, y2) value straight into your transition-timing-function or animation-timing-function.

Easing is what separates motion that feels mechanical from motion that feels natural. A number like cubic-bezier(0.68, -0.55, 0.27, 1.55) means nothing on its own, but drawing the curve and playing it back turns that abstraction into something you can actually feel and tune.

What Is a Cubic Bezier Easing Curve?

A cubic-bezier easing curve describes how a value changes over the course of an animation — slow at first, fast in the middle, overshooting at the end, and so on. In CSS, the cubic-bezier() timing function is defined by four numbers: the x and y coordinates of two control points, written as cubic-bezier(x1, y1, x2, y2). The curve always starts at (0,0) and ends at (1,1); the two control points bend the path between them.

The x axis represents time (progress from 0% to 100%) and is clamped between 0 and 1. The y axis represents the animated value, and it can go below 0 or above 1 — that is exactly how you create springy overshoot and anticipation effects, where an element pulls back slightly before moving or bounces past its target and settles.

How to Use the Cubic Bezier Generator

1. Drag the two handles (P1 and P2) on the curve to shape the easing, or type exact values into the X1, Y1, X2, and Y2 fields.
2. Read the live cubic-bezier() value updating beneath the graph as you drag.
3. Pick a preset — like ease, ease-in-out, ease-out-back, or overshoot — to start from a known-good curve, then fine-tune it.
4. Set the duration and hit Play to watch a box, a bar, and a fade animate with your easing so you can feel the timing.
5. Click Copy value for the raw function, or copy the full transition-timing-function / animation-timing-function declaration.

Why Use a Visual Bezier Editor?

• Feel the motion: the play button animates real elements with your curve, so you tune by feel instead of guessing at numbers.
• Draggable precision: shape the curve by hand, then read exact two-decimal values you can paste anywhere.
• Ready-made presets: start from the standard keywords plus popular custom easings like back, expo, quart, and circ.
• Overshoot support: the graph extends above and below the unit box so you can build springy curves with negative or greater-than-one control points.
• Private and instant: everything runs in your browser with no sign-up, no upload, and nothing saved on a server.

When to Use Custom Easing vs Built-in Keywords

CSS ships with keywords like ease, ease-in, ease-out, and linear, and each one is really just a preset cubic-bezier under the hood — ease, for example, is cubic-bezier(0.25, 0.1, 0.25, 1). For most interface transitions those keywords are plenty. Reach for a custom curve when you want character: a subtle overshoot on a modal that pops in, a sharp deceleration on a menu that slides out, or a bounce that makes a button feel physical. A custom bezier is also the only way to get an easing that eases in and out at different rates.

Where the Bezier Generator Fits in Your Workflow

An easing curve is the timing layer that sits on top of everything else you build. Once your page structure is handled with the CSS Grid Generator and your rows and toolbars are aligned using the CSS Flexbox Generator, the curve you design here controls how those pieces move. Drop the copied value into a keyframe animation from the CSS Animation Generator to give loaders and entrance effects the right feel, or paste it into the hover transition of an element made with the HTML Button Generator so it presses and releases with a natural spring.

Frequently Asked Questions

What does the Cubic Bezier Generator do?

It lets you design a custom CSS easing curve by dragging two control points, previews the motion on live demo elements, and gives you the exact cubic-bezier(x1, y1, x2, y2) value to copy into a transition or animation timing function.

What do the four numbers in cubic-bezier() mean?

They are the coordinates of two control points: x1, y1 for the first and x2, y2 for the second. The x values are time (clamped 0 to 1) and the y values are the animated amount, which can go below 0 or above 1 to create overshoot.

Can a cubic-bezier value create a bounce or overshoot?

Yes. Set a control point's y value below 0 or above 1 — for example cubic-bezier(0.34, 1.56, 0.64, 1) — and the animated value shoots past its target and settles back, which reads as a spring or bounce.

Is cubic-bezier() the same as the ease keyword?

The keywords are shorthands for specific curves. ease equals cubic-bezier(0.25, 0.1, 0.25, 1), linear equals cubic-bezier(0, 0, 1, 1). Writing your own bezier just lets you go beyond those presets.

Is this tool free and private?

Yes. The Cubic Bezier Generator is completely free and runs entirely in your browser. Nothing you draw or copy is uploaded or stored on a server.