Skip to content

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.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What is a cubic bezier editor?
It lets you shape a CSS easing curve by dragging two control points. The editor outputs a cubic-bezier() timing function you can drop into any transition or animation.
How do I use the cubic bezier editor?
Drag the P1 and P2 handles on the curve or type exact values into the number fields. Pick a preset like ease-in-out to start, then watch the live square preview play your easing.
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.