Cubic-bezier Generator

About Cubic-bezier generator

Drag two handles on a square graph to shape a cubic Bezier easing curve, then copy the timing function. The graph treats time as the horizontal axis and progress as the vertical axis, so a steep start means a fast start. It suits anyone who wants motion that feels custom instead of using stock ease keywords.

How to use it

1. Click a preset (ease, linear, ease-in, ease-out, ease-in-out, bounce, elastic or swift) to start from a known curve.
2. Drag the solid handle for P1 and the slightly lighter handle for P2 on the SVG canvas. Touch works too.
3. Read the P1 and P2 coordinates in the Value block; they are rounded to three decimals.
4. Press Play animation to see a bar travel across the track using your curve for one second.
5. Copy the declaration from Generated CSS.

The bounce preset

Preset bounce: P1 (0.68, -0.55), P2 (0.265, 1.55)

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

When to use it

• Designing a snappy menu open that starts fast and settles softly.
• Creating an overshoot on a modal so it pops slightly past its size before returning.
• Matching an animation curve from a design file by adjusting handles until the shape agrees.
• Learning how the standard ease keywords are actually defined as numbers.

Questions about Cubic-bezier generator

Why can the x values not go outside 0 to 1?

CSS requires the horizontal coordinates of a cubic-bezier to stay between 0 and 1, so the tool clamps them. Vertical values may leave that range, which produces overshoot.

How far can I drag vertically?

Dragging reaches roughly -0.2 to 1.2 on the y axis. The bounce and elastic presets go further, so pick those if you want a stronger overshoot.

Which numbers correspond to the built-in keywords?

ease is (0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1) and ease-in-out is (0.42, 0, 0.58, 1). linear is (0, 0, 1, 1).

Can I use the output for animations, not just transitions?

The line is written as transition-timing-function, but the value inside cubic-bezier() works equally for animation-timing-function and inside shorthand properties.

Related tools

• CSS transition builderConfigure property, duration, timing-function, and delay — preview the easing with a live hover demo
• CSS animation builderBuild @keyframes animations with a keyframe timeline, timing controls, and live play button
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color