CSS Easing Generator
Create smooth, natural animations with CSS easing functions. Design custom cubic-bezier curves with an interactive visual editor and live preview.
Standard Easing Functions
Popular Easing Curves
Bezier Curve Editor
cubic-bezier(0.25, 0.1, 0.25, 1)Fine-tune Controls
Animation Preview
Generated Code
.element {
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}Recommended Settings
Easing Best Practices
- •Use ease-out for UI elements entering the screen
- •Use ease-in for elements exiting the screen
- •Use ease-in-out for elements moving within the screen
- •Keep durations between 200ms-500ms for most UI interactions
Performance Tips
- •Prefer transform and opacity for animations (GPU accelerated)
- •Avoid animating properties that trigger layout (width, height, margin)
- •Use will-change property sparingly for critical animations
- •Test easing curves on actual devices, not just desktop
Pro Tips
- •Material Design uses cubic-bezier(0.4, 0, 0.2, 1) for standard motion
- •Ease-out feels more natural for most UI interactions
- •Subtle easing creates polish without drawing attention
- •Negative values in bezier curves create bounce effects
Most Popular
cubic-bezier(0.4, 0, 0.2, 1) for Material Design animations
When to Use This Tool
Use ease-out for smooth hover transitions on interactive elements. Quick entry with gradual deceleration feels responsive and natural.
Recommended: ease-out or cubic-bezier(0.25, 0.46, 0.45, 0.94)
Use ease-in-out for dialogs and overlays that appear and disappear. Balanced acceleration creates professional entrance/exit effects.
Recommended: ease-in-out or cubic-bezier(0.42, 0, 0.58, 1)
Use custom curves with Material Design standard easing for smooth page changes. Maintains flow while keeping user oriented.
Recommended: cubic-bezier(0.4, 0, 0.2, 1)
Use ease-out for reveal animations triggered by scroll. Elements should enter gracefully as content comes into view.
Recommended: cubic-bezier(0.215, 0.61, 0.355, 1)
Use linear for progress bars and spinners. Constant speed communicates ongoing process without distraction.
Recommended: linear or cubic-bezier(0, 0, 1, 1)
How It Works
Choose a preset easing function or create custom curve
Adjust control points using visual editor or sliders
Preview the easing effect with live animation
Fine-tune duration to match your design
Copy code in your preferred format (CSS or JavaScript)
Apply to your transitions or animations
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What is cubic-bezier and how does it work?
Cubic-bezier is a mathematical function that defines the acceleration curve of a transition or animation. It uses four values (x1, y1, x2, y2) representing two control points. The X axis represents time (0-1), and the Y axis represents progression (0-1). The curve shape determines how the animation accelerates and decelerates.
When should I use ease-in vs ease-out?
Use ease-out (slow end) for elements entering the viewport - they arrive smoothly. Use ease-in (slow start) for elements leaving - they accelerate away. Use ease-in-out for elements moving within the viewport. This follows natural motion principles and feels intuitive to users.
Can I use negative values in cubic-bezier?
Yes! Negative Y values create 'anticipation' effects where the animation briefly goes backward before moving forward. Values above 1 create 'overshoot' effects where the animation goes beyond the target then settles back. These create bounce and elastic effects but should be used sparingly.
What's the difference between transition and animation timing?
Both use the same easing functions, but transitions apply easing to property changes (hover, click), while animations apply easing to keyframes. Use transition-timing-function or animation-timing-function. The cubic-bezier values work identically in both contexts.
How do I choose the right duration?
Small elements or subtle changes: 200-300ms. Medium elements like dropdowns: 300-400ms. Large elements or page transitions: 400-600ms. Longer than 600ms feels sluggish. Test on actual devices - animations feel faster on desktop than mobile. Match duration to distance traveled.
Are there performance differences between easing functions?
No, all cubic-bezier functions have the same performance. The browser calculates the curve once. However, what you animate matters: transform and opacity are GPU-accelerated (fast), while animating width, height, or margin triggers layout recalculation (slow). Always prefer transform and opacity.