CSS Cubic-Bezier Timing Function Tool

Create perfectly customized animation timing functions. Drag the control points to shape your curve, preview the motion, and get the exact `cubic-bezier()` code instantly.

Preview Animation:

How CSS Cubic-Bezier Generator Works

The `cubic-bezier()` function defines a custom transition or animation speed curve. It takes four values (P1x, P1y, P2x, P2y) that define the two control points of the curve. This tool allows you to visually manipulate these two points by dragging them on a 2D graph. The curve represents the rate of change (speed) over time. The tool instantly translates your visual curve into the precise `cubic-bezier(x1, y1, x2, y2)` CSS function, which you can apply to any `transition` or `animation` property.

✔️ **Visual Control:** Drag the red (P1) and green (P2) points to shape the curve.
✔️ **Live Preview:** Click 'Play Animation' to see how your custom curve affects motion.
✔️ **Precision Code:** Get the exact four decimal values needed for the `cubic-bezier()` function.
✔️ **Instant Copy:** Copy the entire code block with one click.
✔️ **Free & Fast:** Completely free and runs instantly in your browser.

Related Tools

CSS Animation Generator

Visually create and customize CSS animations (@keyframes) for fade, slide, rotate, and pulse effects instantly.

CSS Box Shadow Generator

Visually generate complex CSS box-shadow effects instantly and copy the code.

CSS Gradient Generator

Create stunning CSS linear and radial gradients with ease.

FAQs about CSS Cubic-Bezier Tool

What are the four numbers in cubic-bezier(x1, y1, x2, y2)?

They represent the coordinates of the two control points (P1 and P2) that define the curve. P1 is at (x1, y1) and P2 is at (x2, y2). The start point is always (0, 0) and the end point is always (1, 1).

Why are the X values limited to 0 and 1?

The X-axis represents time, which must progress from 0 (start) to 1 (end). The Y-axis represents the change in property value, which can go outside the 0-1 range to create "bouncing" or "overshooting" effects.

Is the CSS Cubic-Bezier Tool free to use?

Yes! It’s 100% free and available for unlimited use without any sign-up or installation.

How do I use the generated code?

You paste the generated `cubic-bezier(...)` function as the `transition-timing-function` or `animation-timing-function` value in your CSS.