Shape a CSS easing curve by dragging the two control points, or type the four numbers. Nothing is uploaded — the editor is local.

Cubic Bezier Generator

A cubic-bezier function describes a CSS easing curve through two control points, written as cubic-bezier(x1, y1, x2, y2). The endpoints are fixed at (0, 0) and (1, 1), so only the two middle points are yours to move. This generator draws that curve and hands you the timing function to paste into a stylesheet.

How to use it

• Drag the two blue handles on the graph, or type x1, y1, x2, y2 in the fields.
• x values are limited to 0 to 1, as CSS requires; y values may leave that range to create overshoot.
• Press Preview to animate the sample box with the current curve.
• Copy the cubic-bezier(...) value and use it in transition-timing-function or animation-timing-function.

Frequently asked questions

What does this tool do?
It lets you shape a CSS cubic-bezier easing curve, either by dragging the two control points on the graph or by typing the four numbers, then copies the cubic-bezier() timing function for your stylesheet.

Is my data uploaded?
No. The editor and the curve math run entirely in your browser; nothing is sent to a server.

Which values can change?
The two x coordinates are limited to the range 0 to 1, as the CSS specification requires, while the y values are free and may go outside that range to create overshoot.

Where can I use the result?
Anywhere CSS accepts a timing function: transition-timing-function, animation-timing-function, and the timing argument of the transition and animation shorthand properties.

How is the curve drawn?
The path is the standard cubic Bezier with fixed endpoints at (0, 0) and (1, 1) and your two control points, evaluated with the same polynomial the browser uses for easing.

Can I preview the motion?
Yes. The preview box animates with the current curve, so you can compare easings before copying the value.

Related: the box shadow generator, or browse every browser-only tool on the all tools page.

All tools →  Box shadow generator →

Technical note: the curve is the cubic Bezier polynomial with endpoints (0,0) and (1,1), matching the CSS Easing Functions specification. The editor is dependency-free vanilla JavaScript and runs entirely in your browser; no values or files are sent anywhere.