Cubic Bezier Generator
Design easing curves visually and export cubic-bezier() CSS.
About this tool
Design easing curves visually and export cubic-bezier() CSS. Experiment with motion, layout, and color in real time — then copy values into your stylesheet.
Drag the control points to shape the easing curve. Watch the motion preview for acceleration feel. Example — Material-like standard easing: try `points: 0.4, 0, 0.2, 1` and expect something like `cubic-bezier(0.4, 0, 0.2, 1)`.
Values outside 0–1 on X can be invalid in some browsers — keep X controls in range. See also: CSS Transition Builder, and CSS Animation Builder. Runs in your browser — nothing you paste gets uploaded.
How to use
- Drag the control points to shape the easing curve.
- Watch the motion preview for acceleration feel.
- Copy the cubic-bezier(x1, y1, x2, y2) function.
- Drop it into transition-timing-function or animation-timing-function.
Example
Material-like standard easing
Input
points: 0.4, 0, 0.2, 1
Output
cubic-bezier(0.4, 0, 0.2, 1)
Limitations
- Values outside 0–1 on X can be invalid in some browsers — keep X controls in range.
- Spring/physics easings are not modeled; approximate them with multiple keyframes if needed.
- Does not export ready-made presets for every design system token name.
Related guides
1Related tools
2Frequently asked questions
What does the Cubic Bezier Generator do?
Design easing curves visually and export cubic-bezier() CSS. Runs in your browser — no install, no account.
How do I use the Cubic Bezier Generator?
Drag the control points to shape the easing curve. Watch the motion preview for acceleration feel. Copy the cubic-bezier(x1, y1, x2, y2) function. Drop it into transition-timing-function or animation-timing-function.
Is the Cubic Bezier Generator free?
Yes. No signup, no usage limits, no paywall.
Does the Cubic Bezier Generator upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the Cubic Bezier Generator?
Values outside 0–1 on X can be invalid in some browsers — keep X controls in range. Spring/physics easings are not modeled; approximate them with multiple keyframes if needed. Does not export ready-made presets for every design system token name.