Cubic Bezier Generator
Design a CSS easing curve by dragging its control points and copy the cubic-bezier() value.
Preview
About this tool
Design a custom CSS easing curve by dragging the two control points of a cubic Bézier, or type the four numbers directly. The curve, the connecting handles, a live moving-dot preview, and the ready-to-paste transition-timing-function all update together. Control points can go above 1 or below 0 to make an overshoot or anticipation effect. It runs entirely in your browser.
Frequently asked questions
- What do the four numbers mean?
- They are the X and Y coordinates of the first control point followed by the X and Y of the second:
cubic-bezier(x1, y1, x2, y2). The curve always starts at (0, 0) and ends at (1, 1). - Why are some values rejected?
- The CSS specification requires the X coordinates (the first and third numbers) to stay between 0 and 1, otherwise the curve isn't a function of time. The Y values are unrestricted.
- Can I use this for keyframe animations too?
- Yes. The same value works for
animation-timing-function, and the CSS box shows both.