CSS Easing Previewer
Preview cubic-bezier easing curves against a live animation and copy the timing function for your transitions.
Feel the curve before you ship it
Easing is what separates motion that feels cheap from motion that feels considered. A cubic-bezier curve decides whether an element glides in, snaps, or overshoots — but the four numbers are impossible to picture in the abstract. This previewer animates a real element with your curve every time you press play, and offers the common named presets as one-click starting points.
As a rule of thumb, use ease-out style curves for things entering the screen (fast then settling,
which feels responsive) and ease-in for things leaving. Push the second control point past 1 for a
playful overshoot. When it feels right, copy the timing function into your transition or animation.
Copy-ready CSS
The value updates live and never leaves your browser.
Frequently Asked Questions
What is a CSS easing / cubic-bezier?
Easing controls how an animation accelerates and decelerates over its duration. cubic-bezier(x1, y1, x2, y2) defines a curve; ease, ease-in, ease-out, and ease-in-out are named presets.
What is the difference between ease-in and ease-out?
ease-in starts slow and speeds up — good for elements leaving. ease-out starts fast and slows down — good for elements entering, which feels more natural to users.
How do I use the copied value?
Paste it as the timing function: transition: transform 0.4s cubic-bezier(...); or in an animation. Replace the property and duration to fit your use.
Is this tool free and private?
Yes. It runs entirely in your browser — no sign-up and nothing uploaded.
Want motion and interactions designed with care? Let’s talk.