About Cubic Bezier Generator — CSS Easing Curve Editor
A cubic-bezier editor lets you design CSS easing curves by feel instead of by guesswork. Drag the two control-point handles to bend the curve, watch an animated dot replay the exact timing, and copy the resulting `cubic-bezier()` value straight into your transition or animation. It is the fastest way to dial in how an interface accelerates, settles, or overshoots.
CSS ships only a handful of named easings — ease, linear, ease-in, ease-out, ease-in-out — but a custom timing function gives you full control over the motion. Start from a preset, then nudge the handles (or use arrow keys) until the curve looks right; the y-axis can overshoot past 1 for spring-like anticipation and bounce.
The whole editor runs in your browser. Nothing about your curve is uploaded or tracked, so it works just as well offline as on.
Features
- Two draggable control points with live curve preview
- Animated dot that eases using the current timing function
- Named presets: ease, linear, ease-in, ease-out, ease-in-out
- Copy a clean cubic-bezier() value — fully offline
How to use
- Pick a preset, or start from the default ease curve.
- Drag the two handles to shape the curve — x is clamped to 0–1, y can overshoot for bounce.
- Watch the animated dot replay the timing in real time.
- Copy the cubic-bezier() value and paste it into your CSS transition or animation.
Frequently asked questions
What does cubic-bezier() do in CSS?
It defines a custom easing (timing) function for transitions and animations. The four numbers are the x and y of two control points that bend a curve from (0,0) to (1,1), shaping how a value progresses over time.
Why can the y values go above 1 or below 0?
The x of each control point is clamped to 0–1 because it represents time, but y represents progress and is unclamped. Values outside 0–1 let the curve overshoot or anticipate, producing spring and bounce effects.
How is cubic-bezier different from the ease keyword?
The keywords are just named shortcuts: ease is cubic-bezier(0.25, 0.1, 0.25, 1), linear is cubic-bezier(0, 0, 1, 1), and so on. Writing your own cubic-bezier() unlocks every curve in between.
Does this editor send my curve anywhere?
No. All the math and the animation run locally in your browser. Nothing is uploaded, so the tool works fully offline and your work stays on your device.
Related tools
Everything runs locally in your browser — your input is never uploaded.