Cubic Bezier Generator
Set the two control points of an easing curve and see the curve drawn as you change them. Press Play to run a box along the curve with the same timing function, then copy the cubic-bezier() value for a transition or animation.
The function is defined in the W3C CSS Easing Functions Module Level 1. The curve is computed in your browser, so nothing is sent to a server.
cubic-bezier(0.25, 0.1, 0.25, 1)How to use it
- Start from a keyword preset such as ease-out, or adjust the sliders directly.
- Watch the curve. Keep x between 0 and 100, and push y past 100 for overshoot.
- Press Play to see the motion with the current timing function.
- Copy the cubic-bezier() value into a transition or animation-timing-function.
About the CSS behind it
A timing function maps elapsed time to animation progress. The cubic-bezier(x1, y1, x2, y2) form defines the curve by its two inner control points, with the fixed endpoints (0, 0) and (1, 1). The keywords ease, ease-in, ease-out and ease-in-out are shorthands for particular curves in the W3C CSS Easing Functions Level 1.
The x coordinates are constrained to the range 0 to 1, because time cannot run backwards. The y coordinates are not constrained, so values below 0 or above 1 make the animated property overshoot its start or end value. Use this only for elements where a little movement past the target reads as intended.
Pair the curve with a duration in the CSS animation generator to set the full keyframe animation.
Frequently asked questions
- What do the four numbers in cubic-bezier() mean?
- They are the x and y coordinates of the two inner control points of the curve. The curve starts at (0, 0) and ends at (1, 1). X values must stay between 0 and 1 so that time moves forward. Y values can go outside that range, which creates overshoot.
- What does a y value above 1 do?
- It makes the animated value go past its end point and then settle back. This is the usual "back" or bounce feel. Keep it small, because large overshoot looks like a mistake on most interface elements.
- Is ease-in-out the same as cubic-bezier(0.42, 0, 0.58, 1)?
- Yes. The keyword ease-in-out is defined in the CSS Easing Functions specification as that exact curve, and the presets on this page use the same numbers as the keywords.
- Which timing function should I pick for a UI transition?
- Ease-out suits elements that enter the screen, because they start fast and settle gently. Ease-in suits elements that leave. Ease-in-out suits moves between two places on screen. Keep durations short, around 150 to 300 ms for most controls.
Related tools and components
- CSS Animation GeneratorKeyframes that use this timing function
- CSS Triangle GeneratorArrows and carets for hover states
- Dropdown componentMenus that slide open
- Drawer componentSide panels with an easing curve
- Tabs componentIndicators that move between tabs
- CSS Grid GeneratorLayout for the surrounding page