Skip to content

Cubic Bézier & Easing Editor

Drag the two control points to shape a cubic-bezier() timing function, watch it drive a looping preview, then copy the CSS or export the curve as an SVG. Comparison mode animates every preset side by side.

Curve

cubic-bezier(0.42, 0, 0.58, 1)

1001

Live preview

Translate X

Translate Y

Scale + fade

900 ms

Compare curves

Turn comparison on to animate all 14 presets against your curve at once.

Presets

CSS

transition: all 900ms cubic-bezier(0.42, 0, 0.58, 1);

Reading the graph

  • The horizontal axis is elapsed time, 0 → 1.
  • The vertical axis is animation progress, 0 → 1.
  • A curve that rises above the top edge overshoots — that is how “back” and “elastic” snap past the target before settling.
  • y values outside 0–1 are legal in CSS, and are drawn in the paler bands.

About this tool

This cubic Bézier editor lets you shape an easing curve by dragging its two control points, with the exact cubic-bezier() value updated as you go. Progress is evaluated the way a browser does it — the parametric curve is inverted to find its parameter at a given moment in time — so the preview is genuinely what your CSS will produce, including the overshoot on “back” and “elastic” curves.

Comparison mode animates all fourteen presets against your own curve at once, and the curve can be exported as a standalone SVG. Focus a handle and use the arrow keys for precise nudging, or hold Shift while dragging to snap to a 0.05 grid. The solver, the animation loop and the export all run entirely in your browser — nothing is uploaded and no request is ever made.

  • 100% free — no account needed
  • Runs in your browser
  • Nothing is uploaded

Frequently asked questions

Is Cubic Bézier Editor really free?

Yes. Cubic Bézier Editor is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.

Does Cubic Bézier Editor upload my data?

No. Cubic Bézier Editor runs entirely inside your browser, so anything you type, paste, or open stays on your own device.

Do I need to sign up or install anything?

Neither. There is no account and nothing to download — open the page and Cubic Bézier Editor is ready to use on desktop or mobile.

Does Cubic Bézier Editor work offline?

Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.

More developer tools

Folder Structure Generator

Build folder structure diagrams, ASCII directory trees, and file tree visualizations for READMEs and docs.

.gitignore Generator

Generate merged .gitignore rules for your stack with one click.

JSON to TypeScript Interface

Convert JSON into TypeScript interfaces with inferred nested types.

Text to Slug Converter

Convert titles and phrases into clean SEO-friendly URL slugs.

UTM Builder

Build campaign URLs with UTM parameters for analytics tracking.

JSON Formatter & Validator

Validate, format, and minify JSON directly in your browser.