Cubic Bezier Generator

How to use

1. 1Pick a preset (linear, ease, ease-in, ease-in-out, easeOutBack, Material Standard, and others) or start from the default ease curve.
2. 2Drag the blue handle (P1) and the purple handle (P2) on the curve canvas, or type exact decimal coordinates into the numeric inputs to fine-tune the easing.
3. 3Watch the translate, scale, and progress bar previews to confirm how the curve feels in motion. Adjust the duration slider for slower or faster previews.
4. 4Use Copy value, Copy CSS, Copy class, or Copy array depending on whether you want a raw cubic-bezier() value, a CSS block, a Tailwind utility, or a Framer Motion easing array.

About this tool

Cubic Bezier Generator is a visual editor for the CSS cubic-bezier(p1x, p1y, p2x, p2y) timing function used by transitions and keyframe animations. Drag the two control handles inside an SVG curve canvas, type exact decimal coordinates into the numeric inputs, or pick from twenty-three named presets that cover every CSS keyword (linear, ease, ease-in, ease-out, ease-in-out), the Penner equation family (easeIn/Out/InOut for quadratic, cubic, quartic, exponential, and back/overshoot variants), and the three Material Design easings (Standard, Decelerate, Accelerate). The curve is rendered with a 64-sample path so back and elastic curves stay smooth, and the canvas extends past the unit square so you can see overshoot behavior clearly. Three live previews show the easing in motion the moment you tweak a handle: a translating dot, a scaling square, and a progress bar all driven by the exact same eased value the tool will copy. A timer readout displays the current normalized time t and the matching eased y so you can read overshoot and undershoot in numbers, and a duration slider with 0.6 s, 1.5 s, and 3 s presets lets you preview slow and fast animations without leaving the page. The output panel emits the cubic-bezier() value, a copy-ready CSS block with both transition-timing-function and animation-timing-function lines, a Tailwind v3+ arbitrary-value class for transition-timing-function, and a four-number array suitable for Framer Motion, GSAP CustomEase, and other animation libraries that take cubic Bezier control points directly. The X coordinates are clamped to the 0 to 1 range required by the CSS spec, and the Y coordinates are deliberately allowed to range from -1 to 2 so back, anticipation, and overshoot curves render correctly. The tool runs entirely in your browser; no values are uploaded.

Free to use. Works in your browser. No signup, no login.