CSS Easing Generator
Bezier Curve Editor
Animation Preview
Common Easing Effects
Free online CSS easing generator. Drag control points to create cubic-bezier curves. Built-in presets for ease, ease-in, ease-out, ease-in-out and linear. Real-time animation preview. All processing happens locally.
Tips & Tricks
Drag Control Points
Directly drag the two control points (P1, P2) on the curve to adjust the easing curve in real time. The X-axis represents time progress, the Y-axis represents property change, and the curve slope determines the speed variation of the animation.
Live Animation Preview
Click "Play Animation" to see how the ball moves along the easing function's trajectory. The progress bar intuitively shows the time progress.
One-Click Copy CSS
After adjusting, click the "Copy" button to automatically copy the CSS cubic-bezier() code to your clipboard, ready to paste directly into your project.
Common Use Cases
Entrance Animations
ease-out
Exit Animations
ease-in
Transitions
ease-in-out
Hover Effects
Custom Curves
Progress Indicators
linear
FAQ
What is cubic-bezier?
cubic-bezier is a CSS function that defines the speed curve of an animation, described by a cubic Bezier curve through two control points: P1 (x1, y1) and P2 (x2, y2). The X-axis of the curve represents time progress (0→1), and the Y-axis represents property change (0→1). A steeper curve means faster speed; a flatter curve means slower speed.
How do I use custom easing in CSS?
Use it directly in CSS transition or animation properties: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. The generator's code output area automatically produces the correct CSS code. Click copy to paste and use it directly.
What are the valid ranges for X and Y?
CSS cubic-bezier() requires X values to be between 0 and 1 (corresponding to time from start to end), and Y values are typically between 0 and 1 but can exceed that range (to create bounce effects). This tool constrains X to [0, 1] and Y to [0, 1] to ensure the generated curves are valid CSS easing functions.
What's the difference between the preset easings?
ease: Fast then slow then fast, suitable for general transitions.
ease-in: Slow to fast, suitable for exit animations (elements leaving).
ease-out: Fast to slow, suitable for entrance animations (elements entering), the most commonly used easing.
ease-in-out: Slow at both ends, fast in the middle, smoother than ease.
linear: Constant speed, suitable for color changes, rotations, and other animations that don't need acceleration.