CSS Tools
Cubic Bezier Editor
Drag the curve to design an easing function - preview the motion live.
Curve
Presets
Motion preview
Sampled curve: y(0.5) = 0.526
CSS
cubic-bezier(0.42, 0.00, 0.58, 1.00)
About this tool
Drag the two control points to shape a cubic-bezier easing curve. A test ball animates along the curve so you can feel how it moves. Pick from common presets (ease-in-out, ease-in-back, etc.) as starting points, then copy the cubic-bezier() value into your CSS transition or animation library.
FAQs
What is cubic-bezier?
A cubic-bezier easing function is defined by four numbers (x1, y1, x2, y2) - two control points that bend a curve from (0,0) to (1,1). It controls how an animation or transition progresses over time.
What are the common preset curves?
ease (0.25, 0.1, 0.25, 1) is the CSS default. ease-in (0.42, 0, 1, 1) starts slow. ease-out (0, 0, 0.58, 1) ends slow. ease-in-out (0.42, 0, 0.58, 1) combines both.
Can control points go outside 0-1?
Y values can - that produces an overshoot or anticipation curve (like ease-in-back). X values must stay between 0 and 1, otherwise the curve isn't a valid easing function.
What about spring physics?
CSS doesn't have a spring() easing yet. cubic-bezier approximates a single overshoot, but real springs settle over time. For physical springs use the Web Animations API or a library like Framer Motion.
How long should my transition take?
100-200ms for UI feedback (hovers, focus). 200-400ms for state changes (modal open). 400-600ms for big layout shifts. Anything over a second on UI feels slow.