Cubic Bezier Editor
Drag control points to shape CSS easing curves
About Cubic Bezier Editor
What this tool does
An interactive editor for the CSS cubic-bezier(x1, y1, x2, y2) easing function. Drag two control points on a canvas curve, watch a preview ball animate along the timeline in real time, and pick from named presets (ease, ease-in, ease-out, ease-in-out, and popular Material curves).
When to use it
- Shaping the feel of a button hover or modal enter animation
- Matching an easing curve from a Figma prototype
- Learning why
ease-in-outfeels different fromease - Building custom overshoot / bounce curves
Frequently asked questions
(x1, y1) and (x2, y2) are the two control handles. x is clamped 0–1; y can go beyond for overshoot.
Any CSS `transition-timing-function` or `animation-timing-function` — transforms, opacity, colors, sizes.
Yes — ease, ease-in, ease-out, ease-in-out, plus common Material and iOS-style curves.
Yes — a small ball animates across the timeline continuously so you can feel the curve.
Embed this tool on your site
Drop a one-line iframe snippet into any blog, lesson plan, or knowledge base. Powered-by-Toolenza link included.
Embed this tool
Paste this snippet into any HTML page. The tool runs entirely in your reader's browser.
Cubic Bezier Editor
لا توجد مراجعات بعد — كن أول من يشاركنا رأيه.
- لا توجد مراجعات بعد — كن أول من يشاركنا رأيه.