📈 CSS cubic-bezier Editor
Drag the two control points to edit a cubic-bezier curve. Preview the motion with the animated dot.
✅ 100% free · no signup · nothing sent to any server
🔒 About Privacy
- ・All processing happens entirely in your browser
- ・Input data is never sent to any server
- ・No logs, no history, no database
- ・No signup, no login, no payment ever
Drag the blue and pink points to edit the curve
Preview
Presets
📖 How to Use
-
1
Drag the control pointsDrag the blue and pink points to reshape the curve. The curve becomes the timing function.
-
2
Preview the motionPress Play to animate the red dot and see the actual easing.
-
3
Copy the CSSCopy the generated transition / animation snippet and paste into your CSS.
❓ FAQ
Is my data sent to your server?
No. Everything runs in your browser. You can verify in the Network tab.
Can Y values go outside the 0-1 range?
Yes. Y can exceed 0-1 for bounce or overshoot effects. X must stay within 0-1.
Where can I use this?
Use it in CSS transition-timing-function and animation-timing-function properties.