Cubic-Bezier Editor
Visual editor for CSS cubic-bezier easing curves. Drag handles, copy the CSS string.
Drag handles to edit curve
CSS Output
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);Animation preview
P1: (0.250, 0.100)
P2: (0.250, 1.000)
About Cubic-Bezier Editor
This editor lets you shape a CSS cubic-bezier easing curve by dragging the two control handles on a graph. As you move the handles, the curve updates and a sample dot replays the motion so you can feel the timing. When the curve looks right, copy the generated cubic-bezier() string straight into your transition or animation declaration.
The four control values map directly to the timing-function syntax browsers expect. Keep the X coordinates between 0 and 1 to stay within valid easing; Y values may go outside that range to create overshoot or anticipation effects for bouncy motion.
Frequently asked questions
- What is a cubic-bezier easing function?
- It defines how a CSS animation accelerates over time using four numbers that position two control points of a Bezier curve.
- Can I make a bounce effect?
- Yes. Drag a handle so its Y value goes above 1 or below 0, which pushes the curve past its endpoints and creates overshoot.
- Where do I paste the result?
- Use it as the value of transition-timing-function or animation-timing-function, for example transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1).