Skip to main content

Cubic Bezier Editor — drag P1 / P2, live preview, copy CSS / JS / Framer / GSAP / SVG

CSS cubic-bezier editor — drag two control points, preview live with bouncing ball + scaling box + opacity fade, copy CSS / JS / Framer Motion / GSAP / SVG path.

  • Runs locally
  • Category Generator
  • Best for Starting from a blank page without committing to the first result.
time → progress ↑

Drag P1 / P2, or pick a preset. Y can go outside 0–1 for overshoot.

P1 x
P1 y
P2 x
P2 y
Standard
Material
iOS
Spring / Bounce
Brand
Duration1000ms
Bouncing ball
Scaling box
Fade + rotate
cubic-bezier(0.42, 0, 0.58, 1)

What this tool does

A real cubic-bezier curve editor for front-end people who actually ship motion. Drag the two control points on a 300×300 SVG; the number boxes update live both ways, X is clamped to [0, 1] per the CSS spec, Y is free so you can pull P1 below 0 or P2 above 1 to get anticipate, overshoot, and bounce curves the way Penner originally drew them. Three previews run side-by-side on a single `requestAnimationFrame` loop so they stay perfectly in sync — a horizontal bouncing ball (the canonical "is the timing right" test), a scaling box (so you can feel scale velocity, not just position), and a fading + rotating square (so opacity overshoot, the thing nobody catches in still mockups, becomes obvious). Duration is a 200ms–3000ms slider with play / pause / reset, so you can verify that a curve that looks great at 300ms still feels right at 1.2s. Twenty hand-picked presets cover the territory most projects need: the five CSS standards (linear / ease / ease-in / ease-out / ease-in-out), Material Design 3's four motion tokens (emphasized, standard, decelerated, accelerated — values lifted directly from m3.material.io), three iOS curves (default, easeInQuint, easeOutQuint — the WebKit `CACurves` values), and the spring family (anticipate, overshoot, bounce, elastic, soft-back) so you don't have to look up Robert Penner's numbers every time. Two brand curves round it out (aurora-flow and aurora-bounce). Five export formats: plain CSS `cubic-bezier(...)`, a JavaScript array, a paste-ready Framer Motion `transition.ease` snippet, a GSAP `CustomEase.create(...)` call (the format GSAP's own author recommends), and an SVG `M…C…` path for Figma / Penpot / docs. 100% client-side. Zero animation libraries shipped — the math is ~200 lines of Newton-Raphson + bisection, the same algorithm Chromium ships in `cubic_bezier.cc`.

Tool details

Input
Numbers
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Copy + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
Browser-side processing
The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share
No account required
Open the page and use it; whether results survive refresh depends on the tool.
Performance budget
Initial JS <= 22 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Generator · Designer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How Cubic Bezier Editor fits into your work

Use it to get a strong first draft, starter asset, or structured output that you can edit before publishing.

Generation jobs

  • Starting from a blank page without committing to the first result.
  • Creating repeatable drafts, names, templates, or placeholder assets.
  • Exploring options before choosing the one that fits the job.

Generation checks

  • Review generated output before it reaches a customer, page, or document.
  • Change defaults when you need a specific brand voice, format, or audience.
  • Keep only the parts that match the real task.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 Code Screenshot Generator Code screenshot generator (Carbon-like) — syntax highlight, beautiful gradient backgrounds, window chrome, export PNG/SVG for X / blog covers. Open
  2. 2 CSS Shadow Generator Pro CSS shadow generator pro — multi-layer box-shadow + text-shadow + filter:drop-shadow, with Material/Tailwind/Apple shadow presets and dark-mode preview. Open
  3. 3 CSS Transform Generator CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos. Open

Real-world use cases

  • Build a design-system motion token in 90 seconds

    Your team needs a "primary" motion curve to standardize across buttons, modals, and drawers. Open the tool, click `M3 emphasized`, watch the three previews (does it feel right on position? on scale? on opacity?), tweak P2.x down 0.02 if it feels too aggressive on hover, copy the CSS string. Drop it in your `motion.css` as `--ease-primary` and you have one canonical curve that everyone on the team references by name. Beats the alternative — five engineers each picking a slightly different `cubic-bezier(...)` from Stack Overflow.

  • Debug an animation that "feels wrong" before shipping

    The designer sent you a Framer prototype with a custom curve; you ported it to CSS and your version feels different. Paste the four numbers into this tool, hit play, watch the ball. Nine times out of ten the problem is the duration (Framer prototypes ship at 600ms, your CSS is at 250ms — same curve, different feel). Tenth time it's that Framer's array is in (x1, y1, x2, y2) order but you typed it as (y1, x1, y2, x2). Either way, ten seconds to find vs an afternoon of toggling DevTools.

  • Pick the right curve for a long entrance animation

    A hero entrance that runs 1.4s reads completely different at 1.4s vs 400ms with the same curve — the longer duration exposes the middle of the curve. Set duration to 1400ms in the tool, click through `ease-out`, `m3-decelerated`, and `ios-easeOutQuint`, decide based on the actual long-form feel, not extrapolated from a 400ms preview.

  • Match a spring-style curve a designer drew in Figma

    Figma's "spring" presets don't translate cleanly to CSS — a spring is physics-based, a bezier is parametric. But for most UI motion the user can't tell the difference if you pick `overshoot` or `aurora-bounce` and tune the overshoot amount (P2.y) to match what Figma shows. Eyeball it once in the preview, ship it as CSS, save 200kb of motion library JS that you didn't actually need.

  • Verify opacity easing doesn't flicker

    A common bug: a beautiful overshoot curve applied to opacity flickers because opacity caps at 1 and the curve has to wait there before coming back. Put `bounce` in, watch the "fade + rotate" preview — the fade visibly pauses while the bezier Y is above 1. Now you know not to use this curve on opacity. Switch to `m3-decelerated` (Y stays in [0,1]) for the actual ship.

  • Convert an SVG path easing back to a bezier

    You inherited a GSAP CustomEase with a path like `M0,0 C0.34,1.56 0.64,1 1,1` and want to know what the bezier is. Type the two interior control points (0.34, 1.56) and (0.64, 1) into this tool's number inputs, you've now got the live preview and can decide whether to keep it or replace it with a stock CSS keyword.

Common pitfalls

  • Using bounce / overshoot curves on opacity. Opacity is capped at 1, so any Y > 1 in the curve becomes a visible pause at fully opaque — looks like a flicker. Use these curves on transform (position/scale/rotation) only.

  • Tuning a curve at the wrong duration. A curve that feels great at 1.2s can feel sluggish at 250ms because the eye doesn't see the middle of the curve in 250ms. Pick the production duration first, then tune.

  • Confusing the array order across libraries. CSS is `(x1, y1, x2, y2)`. Framer Motion's `ease` array is the same order. GSAP's CustomEase takes an SVG path. Mix them up and the curve looks "almost right but not quite".

  • Pulling X outside [0, 1] in the number inputs and being surprised the output clamps. CSS spec requires X (the time axis) to stay in [0, 1] — only Y can overshoot.

  • Picking `linear` for everything because "it's neutral". Linear motion looks robotic — almost no real-world motion is linear. `ease-out` is the better default for entrances; `ease-in-out` for state changes.

  • Forgetting that `cubic-bezier` only describes the *shape* of motion, not its speed. A snappy-looking curve at 150ms is just snappy because of duration; the same curve at 800ms feels syrupy. Both shape AND duration matter.

Privacy

Everything happens in your browser. The four bezier numbers, the preset you pick, the duration you set, the format you copy — none of it touches a server. There is no analytics on which presets you use, no telemetry on the curves you tune, no signup, no cookies for the tool itself. The animation math (Newton-Raphson + bisection) runs locally in ~200 lines of JavaScript; the SVG editor is plain SVG with React event handlers, no canvas, no WebGL, no third-party animation library. Open the tool, build what you need, close the tab — nothing leaves your machine.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-06-13