Bezier Curve
CSS cubic-bezier editor online. Interactive curve editor for timing functions. Create custom easing—bezier curve generator free.
Curve Visualization
Animation Preview
1000ms
0% 50% 100%
Compare with Standard Easings
linear
ease
ease-in
ease-out
ease-in-out
CSS Output
Value only
cubic-bezier(0.25, 0.10, 0.25, 1.00)Full property
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);Presets
Control Points
Point 1
(0.25, 0.10)
X-Axis
Y-Axis
Point 2
(0.25, 1.00)
X-Axis
Y-Axis
Animation Settings
Features
- Visual Cubic Bezier editor
- Preview animation with custom duration
- Compare with standard easing functions
- Drag-and-drop curve manipulation
- Copy CSS content instantly
- Library of common easing presets
Common Use Cases
- Create smooth custom animations
- Visualize easing functions before coding
- Debug jerky animations
- Generate bounce or elastic effects
- Understand cubic-bezier mathematics
Cubic Bezier Curves
A Cubic Bezier curve defines the speed of an animation over time. It is defined by four points: P0 (0,0), P1, P2, and P3 (1,1). The X-axis represents time, and the Y-axis represents progression.
Key Concepts:
- P1 & P2: Control points that shape the curve. You move these to change the timing.
- Linear: Constant speed throughout (0,0, 1,1).
- Ease-in: Starts slow, speeds up (acceleration).
- Ease-out: Starts fast, slows down (deceleration).
- Ease-in-out: Slow start, fast middle, slow end (natural movement).
CSS Syntax:
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
Where (x1, y1) are coordinates of P1 and (x2, y2) are coordinates of P2.
Examples
Valid - Ease In
cubic-bezier(0.42, 0, 1, 1) Valid - Ease Out
cubic-bezier(0, 0, 0.58, 1) Valid - Custom Bounce
cubic-bezier(0.68, -0.55, 0.27, 1.55)Frequently Asked Questions
What is the cubic-bezier function?
It's a CSS function that defines a custom timing function for transitions and animations. It accepts four values representing the coordinates of two control points that shape the curve of the animation.
How do I use this in my CSS?
Copy the generated code and use it in `transition` or `animation` properties. Example: `transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);`.
Can values go outside 0-1 range?
Yes! Y-values (progression) can go below 0 or above 1 to create "bounce" or "elastic" effects (overshooting the target). X-values (time) must stay between 0 and 1.
💡 Tips
- Use ease-out for entering elements (feels responsive).
- Use ease-in for exiting elements (feels natural).
- Avoid complex curves for very short animations (<200ms) as they won't be noticeable.