Skip to content

Cubic Bezier Editor

Edit a CSS cubic-bezier() easing curve by dragging control points or typing values, start from presets like ease-in-out or back, and preview it.

Cubic Bezier Editor

CSS value
cubic-bezier(0.25, 0.1, 0.25, 1)
Presets

Live preview

The square loops left to right using your easing curve.

Updated . Provided as is. Check the output before you rely on it in production.

How to use Cubic Bezier Editor

  1. 1

    Pick a starting preset

    Click a preset such as ease, ease-out, or back to load a known curve, then adjust it from there to suit your motion.

  2. 2

    Drag the handles

    Drag the two colored control points on the SVG with a mouse or touch. The X stays between 0 and 1 while Y can overshoot.

  3. 3

    Fine-tune the numbers

    Type precise values into the x1, y1, x2, and y2 fields for exact control over the shape of the timing function.

  4. 4

    Preview and copy

    Watch the looping square preview to feel the motion, then press Copy to grab the cubic-bezier() value for your CSS.

Questions and answers

What is a cubic bezier editor?
A cubic-bezier(x1, y1, x2, y2) easing is a curve from (0,0) to (1,1) whose two control points set how an animation speeds up and slows down. This editor lets you drag those points or type exact values, start from presets such as ease-in-out, back or anticipate, and watch a live preview.
Is the cubic bezier editor free?
Yes. It runs entirely in your browser with no account required, so you can fine-tune as many easing curves as you like.
Does the editor store my curves?
No. The curve, presets, and animation all run locally in your browser. Nothing is sent to a server or saved remotely.
Can I create overshoot or bounce curves?
Yes. The Y values of the control points can drop below 0 or rise above 1, which produces overshoot easings like back and anticipate. Presets for both are built in.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/cubic-bezier-editor/

For automation planning, fetch the canonical contract at /api/tool/cubic-bezier-editor.json.