Craft a CSS easing curve with a live preview and copy the cubic-bezier().
Generated locally in your browser.
What is a CSS cubic-bezier easing curve?
A cubic-bezier(x1, y1, x2, y2) curve runs from (0,0) to (1,1) with two control points; x values are clamped to 0–1 while y values may overshoot for bounce. It maps animation progress (x, time) to output (y, value), so a steeper section means faster motion. For example, cubic-bezier(0.34, 1.56, 0.64, 1) overshoots and settles back for a springy ease.
Understanding your result
The curve maps animation progress (x, time) to output (y, value). A steeper section means faster motion; a y above 1 overshoots for a bounce.
Formula and method
A cubic-bezier(x1, y1, x2, y2) curve runs from (0,0) to (1,1) with two control points. The x values are clamped to 0–1; y values may overshoot for bounce effects.
Assumptions and limitations
The tool produces a cubic-bezier easing function with two control points and previews the motion. Its x values are clamped to the 0-to-1 range as the spec requires, while y may overshoot for bounce. It defines the easing curve only; it does not set the animation's duration, delay, or the property being animated.
Worked example
cubic-bezier(0.34, 1.56, 0.64, 1) overshoots past the end and settles back, producing a springy “back” ease.
How to use this tool
- Pick a preset or choose Custom.
- Set the two control-point coordinates.
- Watch the moving dot, then copy the cubic-bezier().
Common mistakes to avoid
- Setting an x value outside 0–1, which is not a valid timing function.
About the CSS Cubic-Bezier Generator
Design a custom easing curve for CSS transitions and animations. Adjust the two control points or pick a preset, preview the motion live, and copy the cubic-bezier() value.
Who should use this tool
Front-end developers and motion designers crafting custom easing for CSS transitions and animations. Ideal when the built-in easings feel too generic and you want a specific feel — a gentle ease-out, a snappy start, or a springy overshoot — with a live preview before copying the value.
Benefits
- Shapes a custom easing curve with two control points
- Previews the actual motion the curve produces
- Allows y overshoot for springy, bouncy effects
- Copies a ready-to-use cubic-bezier value locally
Practical use cases
- Designing a snappy ease-out for a menu opening
- Creating a springy overshoot for a modal entrance
- Fine-tuning a transition that feels too linear
- Copying an easing value into a CSS animation
Explore all Developer Tools tools
Frequently asked questions
Where do I paste the value?
Use it in transition-timing-function or animation-timing-function, e.g. transition: all .3s cubic-bezier(…).
Can y go above 1?
Yes. Values above 1 (or below 0) make the animation overshoot, which is how bounce and elastic effects are created.
Can the y value of a cubic-bezier go above 1?
Yes. While the x values are clamped to between 0 and 1 because they represent time, the y values may exceed that range. A y above 1 or below 0 makes the animated value overshoot its target and settle back, which creates a bounce or springy easing effect.
Where do I paste a cubic-bezier value in my CSS?
Use it as the timing function in a transition or animation, for example transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1). It replaces keywords like ease or linear. The four numbers define the two control points that shape how the property changes over the animation's duration.