Cubic Bezier Generator

What this tool does

Cubic Bezier Generator lets you drag two control points on a visual curve to design a custom CSS transition-timing-function, previewing the resulting motion live on an animated element, with easing presets (ease-in-back, bounce and more) and the final cubic-bezier() value ready to copy.

CSS easing curves (ease, ease-in-out, and custom cubic-bezier() values) control how an animation accelerates and decelerates, but it’s hard to picture what a specific set of four bezier numbers actually feels like in motion without seeing it animate.

This tool plots the curve visually from two adjustable control points and plays a live animated preview using that exact easing, with common presets (including bouncy, overshooting ones) to start from, and the final cubic-bezier() CSS value ready to copy.

How to use Cubic Bezier Generator

1. Pick a starting preset, or adjust the control point sliders from scratch.
2. Watch the animated preview to feel how the easing moves.
3. Press Replay to watch the motion again.
4. Copy the generated cubic-bezier() CSS value.

Tips for better results

• A cubic bezier curve always starts at (0,0) and ends at (1,1), only the two middle control points (P1 and P2) are adjustable, they define how the curve bows between those fixed ends.
• Control point Y values can go below 0 or above 1 to create an "overshoot" effect, the animation briefly moves past its final value and springs back, as seen in the ease-in-back and bounce presets.
• A curve that bows strongly upward early (high P1 Y) starts fast and eases out, while one that stays low at first (low P1 Y) starts slow and accelerates later.
• Custom easing is especially noticeable on short, punchy UI animations (a button press, a toast notification sliding in), subtle differences in curve shape change how "snappy" or "organic" the motion feels.

Common use cases

• Designing a custom easing curve for a specific animation’s feel (snappy, bouncy, smooth).
• Understanding what a specific cubic-bezier() value actually looks like in motion before using it.
• Prototyping a bouncy or overshooting UI transition (like a modal pop-in or button press).
• Learning how bezier control points relate to perceived animation speed and feel.

Common mistakes to avoid

• Assuming all four bezier numbers are independently freely adjustable; the curve’s start and end points are always fixed at (0,0) and (1,1), only the two middle control points move.
• Setting control point Y values far outside the -1 to 2 range expecting a more dramatic effect; extreme values usually just produce an unusably chaotic motion rather than a more pronounced, still-smooth overshoot.
• Picking a highly bouncy or overshooting curve for a long, slow animation, where the effect feels unnatural or distracting, bouncy easings generally read better on short, snappy UI transitions.