Cubic Bezier Generator
Create custom CSS cubic-bezier() easing curves with a visual graph and live animation preview. Includes common presets. Copy the timing function instantly.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Design the timing of an animation
Easing is what makes an animation feel natural and alive rather than robotic and mechanical, and the CSS cubic-bezier function lets you define your own custom easing curve to control it precisely. This generator gives you a visual graph to shape the curve by dragging its control points and a live animation to actually feel how it moves, then produces the cubic-bezier value for you to use. Feeling the motion is essential, because timing is something you judge by sense rather than by number.
Why easing is the soul of animation
A linear animation moves at a single constant speed from start to finish and immediately feels cheap and mechanical, because almost nothing in the physical world actually moves that way; real things accelerate and decelerate. An easing curve describes precisely how the speed changes over the course of the animation, perhaps a slow start, a fast middle and a gentle stop, and getting it right is the entire difference between motion that feels considered and motion that feels amateurish. The bezier curve encodes all of that timing in just four numbers.
Copy the value
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What does cubic-bezier control?
The easing of an animation, how its speed changes over time, defined by a curve. It is what makes movement feel natural rather than mechanical.
Why does linear easing feel wrong?
Because nothing in the real world moves at a constant speed; things accelerate and decelerate. A linear animation therefore feels mechanical and cheap.
Why design the curve visually?
Because four bezier numbers are impossible to intuit. Shaping the curve and watching a live animation is the only practical way to get the feel right.
What is a good general easing?
A curve that starts and ends gently with a faster middle feels natural for most interface motion, but the right curve depends on the effect.
Is my input uploaded?
No. The generator runs entirely in your browser.
Privacy & Security
All processing happens locally in your browser — nothing is uploaded.
How to Use
Adjust the four control values or pick a preset. Watch the preview and copy the cubic-bezier().
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.