What is a Cubic Bezier Generator?
CSS transitions and animations use a timing function to control the pace of change over time, rather than moving at a constant speed from start to finish. The built-in keywords like ease, ease-in, and ease-out are actually just shorthand for specific cubic-bezier() curves under the hood. This tool lets you design a completely custom curve by dragging its two control points, rather than being limited to the handful of built-in presets, and gives you the exact CSS to copy once it looks right.
When to use it
Reach for this when a built-in easing keyword doesn't quite match the feel you're going for, whether that's a snappier start, a slower settle at the end, or a slight overshoot before settling into place. It's especially useful for interface animations where the exact feel of a transition genuinely affects how polished the interaction seems, since a poorly chosen easing curve can make an otherwise well-built animation feel stiff or mechanical.
How it works
A cubic bezier easing curve is defined by two control points, each with an x and y coordinate, plugged into the CSS cubic-bezier() function as four numbers. The x-axis represents progress through the animation's duration, and the y-axis represents progress through the property being animated. Dragging a control point changes its coordinates, which reshapes the curve and changes the pacing, visualized directly against a straight diagonal reference line showing constant, un-eased speed for comparison.
Frequently asked questions
What's the difference between ease, ease-in, and ease-out?
All three are preset cubic-bezier curves. ease starts and ends slowly with a faster middle, and is the CSS default. ease-in starts slowly and accelerates toward the end. ease-out starts quickly and decelerates toward the end. Each is really just a specific cubic-bezier() value with a convenient name.
Can a cubic bezier curve make an animation overshoot before settling?
Yes, if the y-coordinate of a control point goes above 1 or below 0, the curve can dip past its target value and settle back, creating a bounce or overshoot effect. This is a common technique for making an animation feel more energetic or playful rather than strictly linear in its approach to the final state.
Do all browsers support custom cubic-bezier easing?
Yes, cubic-bezier() has been broadly supported in modern browsers for a long time and is safe to use in production CSS without a fallback, unlike some newer CSS features that still need feature detection or vendor prefixes in certain contexts.