Cubic Bezier Generator
Drag the two control points to shape the easing curve. A looping preview shows the motion, and the cubic-bezier timing function is ready to copy.
This cubic bezier generator is an easing curve editor you drive by dragging two control points on the curve. As you move them, the looping preview animates with that exact timing so you can feel whether the motion eases in, eases out, or overshoots. It doubles as a css timing function tool: the cubic-bezier(...) value updates live and drops straight into a transition or animation. Start from a preset like ease-in-out or overshoot, then tweak the bezier animation curve until the motion feels right.
Drag the two dots to reshape the easing curve.
P1 (0.25, 0.1) P2 (0.25, 1)
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
How it works
- 1
Start from a preset
Pick a preset like ease, ease-in-out or overshoot to get a curve close to what you want.
- 2
Drag the control points
Move the two dots to reshape the curve. Watch the looping preview to judge how the easing feels.
- 3
Copy the timing function
Copy the cubic-bezier(...) value and drop it into your transition-timing-function or animation.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- What do the four numbers in cubic-bezier mean?
- They are the coordinates of the two control points: x1, y1, x2, y2. The x values, which stay between 0 and 1, control timing along the animation; the y values control how far the value travels and can go past 0 or 1 to overshoot.
- Why can the curve go outside the box?
- When a control point y drops below 0 or rises above 1, the animation overshoots and settles back, which is how bounce and elastic effects look. The editor gives extra room above and below for that.
- Where do I use the generated value?
- Paste it into transition-timing-function or the timing slot of an animation shorthand. It replaces keywords like ease or linear with your custom curve.
- How is this different from ease-in-out?
- ease-in-out is one fixed cubic-bezier curve. This editor lets you set your own control points, so you can make the acceleration sharper, gentler, or add overshoot the presets do not cover.
- Do all browsers support cubic-bezier?
- Yes. cubic-bezier has been part of CSS timing functions for years and works in every current browser.
More tools
More from the Hivly network
Free sister tools on our other sites.
