No Login Data Private Local Save

CSS Easing Curves Visualizer - Online Cubic & Steps

Developer Tools Educational animation cubic‑bezier easing steps
41
0
0
0

Easing Curve

P1( , ) P2( , )
Basic
Material Design
Sine & Power
Back & Overshoot
Live Preview
Duration: 2.0s
CSS Output
Click code to copy •
Frequently Asked Questions
What is a CSS cubic-bezier() easing function?
cubic-bezier() is a CSS timing function that defines the acceleration pattern of an animation or transition. It uses a cubic Bézier curve defined by 4 points: P0(0,0), P1(x1,y1), P2(x2,y2), and P3(1,1). The x-axis represents time (0 to 1), and the y-axis represents the animation progress. By adjusting the two control points (P1 and P2), you can create smooth, custom easing effects — from gentle fades to dramatic bounces. This tool lets you visually adjust those control points and instantly see the result.
What's the difference between ease, ease-in, ease-out, and ease-in-out?
ease (default): Starts slow, speeds up, then slows down — great for most UI transitions. cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: Starts slow and speeds up — ideal for elements entering the screen. cubic-bezier(0.42, 0, 1, 1)
ease-out: Starts fast and slows down — perfect for elements leaving or settling. cubic-bezier(0, 0, 0.58, 1)
ease-in-out: Slow at both ends, fast in the middle — smooth for continuous animations. cubic-bezier(0.42, 0, 0.58, 1)
What are CSS steps() and when should I use them?
steps(n, jump-term) creates a stepped (staircase) animation with n discrete intervals instead of smooth transitions. It's perfect for sprite animations, typewriter effects, and frame-by-frame animations. The jump-end value (default) means the step happens at the end of each interval. Other options include jump-start, jump-none, and jump-both. Use steps when you need discrete, frame-like motion rather than fluid movement.
Can cubic-bezier y-values go outside the 0–1 range?
Yes! The y-values of control points can extend beyond [0, 1], which creates overshoot or "back" effects. For example, cubic-bezier(0.175, 0.885, 0.32, 1.275) (easeOutBack) has y2=1.275, causing the animation to briefly go past its target before settling — creating a playful, elastic feel. Similarly, negative y-values (as in easeInBack) cause the animation to dip below the starting point before moving forward. This tool visualizes these overshoots clearly.
How do I choose the right easing for my project?
UI micro-interactions (button hovers, toggles): Use ease-out or Material Design decelerated for quick, responsive feedback.
Page transitions / modals: Use ease-in-out or standard for balanced, polished motion.
Attention-grabbing animations: Try easeOutBack for a bouncy reveal effect.
Loading spinners: linear for constant rotation.
Sprite sheets: Use steps() for frame-perfect playback.
Always test with real content — the best easing feels natural and doesn't distract.
What's the difference between CSS easing and JavaScript animation libraries?
CSS easing via cubic-bezier() and steps() is hardware-accelerated by the browser, requires zero JavaScript, and is perfect for simple transitions and keyframe animations. JavaScript libraries (like GSAP or anime.js) offer more advanced easing curves (elastic, bounce, custom equations) and finer control over complex animation sequences. For most web UI work, CSS easing is sufficient and performs better. Use this tool to find the perfect CSS curve before reaching for JavaScript.
🔧 Related Tools