Can control points go outside the 0-1 range?

Yes. The X values of P1 and P2 must stay in [0, 1] (the CSS spec requires this), but the Y values can go outside [0, 1]. Values below 0 or above 1 create 'overshoot' effects — the animated property temporarily goes beyond its start or end value. This is what creates Elastic and Back easing effects.

Bezier Curve Editor & Easing Function Visualizer – CSS, Unity, C++, JS

Interactive cubic Bezier curve editor with real-time animation preview, 35 easing presets, side-by-side comparison, and code export for CSS, Unity C#, C++, and JavaScript.

Drag ● P1 and ● P2 to reshape the curve

Control Points

cubic-bezier(0.2500, 0.1000, 0.2500, 1.0000)

Click to copy

Animation Preview

Duration1.0 s

Export Code

Click to copy

/* CSS transition */
transition: all 300ms cubic-bezier(0.2500, 0.1000, 0.2500, 1.0000);

/* CSS animation */
animation-timing-function: cubic-bezier(0.2500, 0.1000, 0.2500, 1.0000);

What Is a Cubic Bezier Curve Editor?

A cubic Bezier curve editor is an interactive tool for designing easing functions — the timing curves that control how an animated value changes over time. This free online editor lets you drag two control handles (P1 and P2) directly on a canvas, preview the resulting motion with a real-time animation, and export ready-to-paste code for CSS, Unity C#, Unreal Engine C++, GSAP, and Anime.js.

Easing functions are used everywhere animated motion appears: UI transitions in web apps, character animations in games, camera movements in film, industrial robot motion profiles, and simulation physics. A poorly chosen easing makes motion feel mechanical or jarring; a well-designed Bezier curve makes it feel natural, responsive, and polished.

This tool runs entirely in your browser using WebAssembly (Rust compiled to WASM). No data leaves your machine — all curve computation, Newton-Raphson solving, and code generation happen locally.

Cubic Bezier Curve — Mathematics and CSS Mapping

A cubic Bezier curve is a parametric polynomial of degree 3 defined by four control points. The general form is:

General Bezier formula:

B(t) = (1−t)³·P0 + 3(1−t)²t·P1 + 3(1−t)t²·P2 + t³·P3, t ∈ [0, 1]

In the CSS cubic-bezier() timing function:

P0 = (0, 0) — fixed start anchor (t=0, progress=0)
P3 = (1, 1) — fixed end anchor (t=1, progress=1)
P1 = (x1, y1) — first adjustable control point (orange handle)
P2 = (x2, y2) — second adjustable control point (red handle)

The x-axis represents animation time (0 = start, 1 = end); the y-axis represents the animated property's progress. The curve maps time → progress.

The t-to-x Problem and Newton-Raphson Solving

In CSS, the browser needs to answer: given a time fraction x, what is the progress y? But the Bezier parameter t is not the same as x — B(t).x = x must be solved for t first, then y = B(t).y. This tool uses 8-iteration Newton-Raphson to find t, which is exactly how V8 (Chrome), SpiderMonkey (Firefox), and WebKit (Safari) implement cubic-bezier().

Newton-Raphson iteration (x → t):

t_{n+1} = t_n − (B_x(t_n) − x) / B_x′(t_n)

where B_x(t) = 3(1−t)²t·x1 + 3(1−t)t²·x2 + t³ and B_x′(t) = its derivative.

Y-Value Overshoot

The CSS spec requires P1.x and P2.x to remain in [0, 1] to keep the time mapping monotonic. However, P1.y and P2.y are unrestricted — values outside [0, 1] create overshoot, where the animated property temporarily exceeds its target (Back easing) or oscillates (Elastic easing). This tool allows full Y drag beyond the graph box boundary for these effects.

CSS Easing Functions — cubic-bezier() Reference

The CSS transition-timing-function and animation-timing-function properties accept cubic-bezier(x1, y1, x2, y2) directly. The five CSS keywords are Bezier shorthands:

CSS Keyword	cubic-bezier() equivalent	Character
`linear`	cubic-bezier(0, 0, 1, 1)	Constant speed
`ease`	cubic-bezier(0.25, 0.1, 0.25, 1)	Fast start, gentle deceleration (default)
`ease-in`	cubic-bezier(0.42, 0, 1, 1)	Slow start, accelerates to end
`ease-out`	cubic-bezier(0, 0, 0.58, 1)	Fast start, decelerates to end
`ease-in-out`	cubic-bezier(0.42, 0, 0.58, 1)	Slow at both ends, fast in middle

How to Use cubic-bezier() in CSS

Transition timing:

transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

Animation timing:

animation: slide 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;

CSS custom property (reusable):

--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 400ms var(--ease-spring);

Easing Preset Families — 35 Named Curves

The Easing Presets tab organises 35 curves into 9 mathematical families. Each family has Ease In (accelerates), Ease Out (decelerates), and Ease In-Out (symmetric) variants. Click any card to apply it immediately to the editor.

Family	Ease In	Ease Out	Ease In-Out	Character
Sine	0.12, 0.00, 0.39, 0.00	0.61, 1.00, 0.88, 1.00	0.37, 0.00, 0.63, 1.00	Gentle sinusoidal — subtle, natural
Quad	0.11, 0.00, 0.50, 0.00	0.50, 1.00, 0.89, 1.00	0.45, 0.00, 0.55, 1.00	Quadratic — smooth UI transitions
Cubic	0.32, 0.00, 0.67, 0.00	0.33, 1.00, 0.68, 1.00	0.65, 0.00, 0.35, 1.00	Cubic — pronounced but smooth
Quart	0.50, 0.00, 0.75, 0.00	0.25, 1.00, 0.50, 1.00	0.76, 0.00, 0.24, 1.00	Quartic — snappy with strong contrast
Expo	0.70, 0.00, 0.84, 0.00	0.16, 1.00, 0.30, 1.00	0.87, 0.00, 0.13, 1.00	Exponential — dramatic, high-contrast
Circ	0.55, 0.00, 1.00, 0.45	0.00, 0.55, 0.45, 1.00	0.85, 0.00, 0.15, 1.00	Circular — sharp change near endpoints
Back	0.36, 0.00, 0.66,-0.56	0.34, 1.56, 0.64, 1.00	0.68,-0.60, 0.32, 1.60	Overshoot — spring-like anticipation
Elastic	0.50, 0.00, 0.75,-0.50	0.25, 1.50, 0.50, 1.00	0.68,-0.55, 0.27, 1.55	Elastic oscillation — rubber-band feel
Bounce	0.30, 0.00, 0.70, 0.00	0.30, 1.00, 0.70, 1.00	0.50, 0.00, 0.50, 1.00	Bounce approximation — ball impact

Which Easing Should I Use?

Entering UI elements (slide in, fade in): Ease Out (Cubic or Expo) — starts fast, settles smoothly
Exiting UI elements (slide out, fade out): Ease In (Cubic or Expo) — starts gentle, exits cleanly
Continuous / looping animations: Ease In-Out (Sine or Quad) — symmetric, no jarring ends
Button press / click feedback: Back Out or Elastic Out — spring overshoot feels responsive
Object landing / impact: Bounce Out — simulates physical collision
Loading spinners, morphing shapes: Linear — constant speed avoids visual rhythm disruption
Game UI popups: Back In-Out — anticipation before movement, settle with overshoot
Drag-and-drop drop feedback: Elastic Out — communicates successful drop with spring

Export Targets — CSS, Unity, C++, JavaScript

CSS — transition-timing-function and animation-timing-function

The CSS export generates two ready-to-use declarations. Paste into any stylesheet:

/* For CSS transitions */
transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* For CSS animations */
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

Unity C# — AnimationCurve and DOTween

Unity's AnimationCurve uses Hermite spline tangents. The export approximates the Bezier curve by deriving in/out tangents from P1.y and P2.y, compatible with both the built-in Animator and DOTween's SetEase(AnimationCurve).

AnimationCurve curve = new AnimationCurve(
new Keyframe(0f, 0f, 0f, 3f * p1y),
new Keyframe(1f, 1f, 3f * (1f - p2y), 0f)
);

// DOTween
transform.DOMove(target, 1f).SetEase(curve);

// Animator override
animator.SetFloat("SpeedMultiplier", curve.Evaluate(t));

JavaScript — GSAP and Anime.js

GSAP accepts CSS cubic-bezier strings directly as the ease value. Anime.js uses a dedicated cubicBezier() helper.

// GSAP 3
gsap.to(el, { duration: 0.6, ease: 'cubic-bezier(0.34,1.56,0.64,1)' });

// Anime.js
anime({ targets: el, translateX: 250, easing: 'cubicBezier(0.34,1.56,0.64,1)' });

// Web Animations API
el.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(250px)' }],
{ duration: 600, easing: 'cubic-bezier(0.34,1.56,0.64,1)' });

C++ — Unreal Engine and Custom Engines

The C++ export provides a self-contained evaluation function with no dependencies. For Unreal Engine, wrap in a UCurveFloat or call directly in a Tick() function:

float CubicBezierEase(float t, float p1x, float p1y, float p2x, float p2y) {
// Solve for Bezier t parameter given x using Newton-Raphson
float bt = t;
for (int i = 0; i < 8; ++i) {
float x = 3*(1-bt)*(1-bt)*bt*p1x + 3*(1-bt)*bt*bt*p2x + bt*bt*bt - t;
float dx = 3*(1-bt)*(1-3*bt)*p1x + 3*bt*(2-3*bt)*p2x + 3*bt*bt;
bt -= x / dx;
}
float u = 1.0f - bt;
return 3*u*u*bt*p1y + 3*u*bt*bt*p2y + bt*bt*bt;
}

How to Use This Bezier Curve Editor

Drag P1 / P2 on the canvas: Click the orange (P1) or red (P2) handle and drag. P1 and P2 X values are clamped to [0, 1] automatically; Y values can go beyond the box boundary for overshoot effects. The curve, arms, and cubic-bezier() output update instantly.
Type exact coordinates: Use the X / Y number inputs to enter precise values. The input accepts any float — type freely, the canvas updates when the value is valid. Useful for reproducing a specific preset or protocol-specified timing.
Preview the animation: Click Play to see a ball animate from (0,0) to (1,1) along the curve. The progress bar at the bottom of the canvas tracks time (x-axis). The ball's height shows how the easing feels — overshoot is clearly visible for Back and Elastic curves.
Apply a preset: Switch to the Easing Presets tab and click any card. The editor immediately applies that curve's P1 and P2 values and switches back to the Editor tab. Use this as a starting point before fine-tuning.
Compare multiple curves: Click + Save in the Animation Preview section to snapshot the current curve. Switch to the Compare tab to see all saved curves overlaid on the same canvas — useful for deciding between similar easings (e.g., Back Out vs Elastic Out).
Copy the export code: In the Export Code section, select the target (CSS / Unity C# / C++ / JS), then click the code block to copy it to clipboard. The cubic-bezier() string below the control-point inputs is also click-to-copy.

Frequently Asked Questions — Bezier Curve Editor

What is a cubic Bezier curve?

A cubic Bezier curve is a parametric polynomial of degree 3 defined by four control points: P0 (start), P1 (first tangent handle), P2 (second tangent handle), and P3 (end). The curve passes through P0 and P3, and is attracted toward — but does not pass through — P1 and P2. In CSS cubic-bezier(), P0 is fixed at (0, 0) and P3 at (1, 1), so you specify only P1 and P2.

How do I use cubic-bezier() in CSS?

Assign it to transition-timing-function or animation-timing-function.

transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

This tool generates the exact string in the Export Code section — click CSS, then click the code block to copy.

What is the difference between ease, ease-in, ease-out, and ease-in-out?

All four are shorthand keywords for specific cubic-bezier values:

ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) — fast start, gentle deceleration (CSS default)
ease-in = cubic-bezier(0.42, 0, 1, 1) — slow start, accelerates to end — use for exit transitions
ease-out = cubic-bezier(0, 0, 0.58, 1) — fast start, decelerates — use for enter transitions
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1) — slow at both ends — use for looping or cross-fades

Can control point Y values go outside the 0–1 range?

Yes — and intentionally. The CSS spec requires P1.x and P2.x to stay in [0, 1] to ensure the time mapping is monotonic (otherwise a single time value could map to multiple progress values). But P1.y and P2.y are unrestricted. Values above 1 or below 0 create overshoot — the animated property temporarily exceeds its start or end value. This is what gives Back easing its anticipation spring and Elastic easing its oscillation. This editor allows free Y drag well beyond the graph box boundary to design these curves.

How do I export a Bezier curve to Unity?

Select the Unity C# tab in the Export Code section. The tool generates an AnimationCurve with Keyframe tangents derived from P1.y and P2.y using the relation: outTangent = 3·P1.y, inTangent = 3·(1−P2.y). This is compatible with the Unity Animation window, Animator Controller, and DOTween's SetEase(AnimationCurve).

How do I use a Bezier easing curve in GSAP or Anime.js?

Select the JavaScript tab. GSAP 3 accepts CSS cubic-bezier strings directly as the ease option. Anime.js provides a cubicBezier(x1, y1, x2, y2) easing factory. The export code shows both, ready to paste:

gsap.to(el, { duration: 0.6, ease: 'cubic-bezier(0.34,1.56,0.64,1)' });
anime({ targets: el, easing: 'cubicBezier(0.34,1.56,0.64,1)' });

What is the Newton-Raphson method used for in Bezier easing?

The Bezier parameter t is not the same as animation time x. To find the progress y at a given time x, we must solve B_x(t) = x for t, then evaluate B_y(t). Newton-Raphson iteration solves this in 8 steps to machine precision, which is the same algorithm used by all major browser CSS engines. Without it, the animation preview would be inaccurate — especially for steep curves with Expo or Circ easing.

How do I compare multiple easing curves?

Configure a curve in the Bezier Editor, then click the + Save button in the Animation Preview section. Repeat for other curves. Then switch to the Compare tab — all saved curves are overlaid on the same canvas in distinct colours, alongside the current editor curve (always shown in cyan). Up to 4 curves can be saved simultaneously. Click the × icon next to any saved curve to remove it.