Cubic Bezier Generator
Free online cubic-bezier easing curve generator. Drag control points to design CSS transition and animation timing functions, preview the motion live, and copy ready-to-use cubic-bezier() CSS. 100% client-side.
Loading tool...
What is Cubic Bezier Generator?
The Cubic Bezier Generator is a free, browser-based tool for designing the timing of CSS transitions and animations. A cubic-bezier() easing function is defined by two control points, P1(x1, y1) and P2(x2, y2): the X axis represents time (always 0 to 1) and the Y axis represents the animation’s progress (which can overshoot below 0 or above 1 for effects like back or bounce). Drag the handles on the interactive graph, fine-tune the numbers, pick a preset, then copy the generated cubic-bezier() value straight into your CSS. Everything runs locally in your browser with no data sent anywhere.
Key Benefits
- Design easing visually instead of guessing four decimal numbers
- X axis locked to the valid [0,1] time range, while Y supports overshoot for spring and back effects
- Eight ready-to-use presets matching common CSS keywords plus custom curves
- Live animation preview using your exact easing function, plus copy-ready CSS and SVG path output
- 100% client-side and offline — your design never leaves your device
Common Use Cases
- •Craft a custom ease for UI micro-interactions like buttons, modals, and toasts
- •Reproduce the feel of a design tool’s easing (e.g. Figma) in production CSS
- •Create spring or back overshoot effects by letting the Y value exceed [0,1]
- •Compare your curve against the linear reference line to see acceleration at a glance
- •Teach or learn how cubic-bezier control points shape CSS animation timing
How to Use the Cubic Bezier Generator
- Drag the Control Handles: Click and drag the two colored handles (P1 and P2) on the curve editor. P1 shapes the start of the animation and P2 shapes the end. The X axis is time (locked to 0–1) and the Y axis is progress (can overshoot for spring or back effects).
- Fine-Tune the Numbers: Use the numeric inputs for x1, y1, x2, y2 for precise control. X values are automatically clamped to [0,1] as browsers require, while Y values can go below 0 or above 1 for overshoot.
- Preview the Animation: Watch the live preview dot move with your exact easing function. Click Replay to restart the loop, or pick a preset (linear, ease, back-out, etc.) for a quick starting point.
- Copy the CSS: Click Copy to grab the cubic-bezier() value, or copy the full transition shorthand snippet and paste it straight into your stylesheet. An exportable normalized SVG path is also provided.
Key Features
- Fully interactive SVG curve editor with draggable P1 and P2 control handles and a reference linear line for comparison
- Eight ready-to-use presets including linear, ease, ease-in, ease-out, ease-in-out, back-in, back-out, and a snappy custom curve
- Precise numeric inputs for x1, y1, x2, y2 with automatic X clamping to the valid [0,1] range and Y support for overshoot values
- Copy-ready cubic-bezier() CSS value plus a full transition shorthand snippet and an exportable normalized SVG path
- Live, looping animation preview using your exact easing function so you can see the motion in real time
- 100% client-side and offline — no tracking, no signup, and your design never leaves your browser