transition-timing-function: cubic-bezier(0.400, 0.000, 0.200, 1.000); animation-timing-function: cubic-bezier(0.400, 0.000, 0.200, 1.000);
This runs in your browser. Nothing is uploaded.
About Cubic bezier generator
Tune a CSS cubic-bezier() easing curve with a motion preview and copyable timing function.
ease and linear get you started. Product UI often needs a custom cubic-bezier that feels snappier on exit or softer on enter. Typing four mystery numbers is guesswork; a curve editor with a motion preview is how you feel the easing before you ship it.
Drag the handles (or edit the values), watch the preview animation, and copy cubic-bezier(...) into transition-timing-function or animation-timing-function. The curve never leaves this tab until you paste it.
Clamp is about sizes across viewports. This tool is about time. Flex and grid will not fix a transition that feels wrong — easing will.
How to use Cubic bezier generator
- 1Adjust the two control points of the cubic bezier.
- 2Play or watch the motion preview until the feel is right.
- 3Copy the cubic-bezier() value into your CSS.
What it won't do
- Standard cubic-bezier only — no bounce or elastic presets beyond what the curve can approximate.
- Preview duration is illustrative.
Common questions
Where do I paste the cubic-bezier output?
Into transition-timing-function, animation-timing-function, or any property that accepts a CSS timing function.
Is this the same as spring physics?
No. CSS cubic-bezier is a fixed four-number curve. Spring or bounce physics need different approaches (or keyframed approximations).
Can I preview duration separately?
The preview uses a sensible duration so you can judge shape. Set the real duration in your own CSS when you paste the easing.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation