Cubic Bezier Editor
Drag the handles to craft a custom easing curve. Preview motion in real time and copy the CSS value for your transitions and animations.
Live preview
Values
CSS
cubic-bezier(0.42, 0.00, 0.58, 1.00)Transition
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);About cubic-bezier easing
CSS cubic-bezier() defines a custom easing function with two control points. The first control point shapes how the animation starts; the second controls how it ends. Values above 1 or below 0 on the Y axis create overshoot and bounce effects.
Use the editor to build expressive motion curves for CSS transitions, keyframe animations, JavaScript animation libraries like Framer Motion or GSAP, and WAAPI timelines. All calculations happen in your browser — nothing is uploaded.