How to create a custom CSS easing
- Start from a preset such as
ease-outoreaseOutBack, or drag the red and blue handles to shape the curve. - Press Play to compare your timing with linear motion. Change the duration to see how it feels at different speeds.
- Fine-tune the four numbers directly if you need exact values, then copy the CSS or the JavaScript array.
Reading the curve
The horizontal axis is time and the vertical axis is progress. A steep section means fast movement; a flat section means slow movement. Ease-out curves start steep and flatten, so elements arrive gently: the best default for things entering the screen. Ease-in starts slowly and speeds up, suiting elements that leave. Ease-in-out is slow at both ends, good for elements moving from one place to another on screen.
The two handles are the control points (x1, y1) and (x2, y2) of a cubic Bézier curve from (0, 0) to (1, 1). The x values must stay between 0 and 1, because time cannot run backwards, but y values may go below 0 or above 1. That creates anticipation (a small backwards wind-up) or overshoot (going past the target and settling back), as in the "Back" presets, which make interfaces feel springy.
Use the CSS in transition-timing-function or animation-timing-function. The JS array works with the Web Animations API, Framer Motion and GSAP's CustomEase. Interface animations usually feel best between 150 and 400 ms.
What is the CSS default easing?
ease, which equals cubic-bezier(.25, .1, .25, 1).
Why can't I drag a handle past the edges?
The x coordinates are limited to 0–1 by the CSS specification. You can drag vertically beyond the box for overshoot effects.
How do I make a bounce?
A single cubic Bézier can overshoot once, as in easeOutBack. Multiple bounces need keyframes or the linear() easing function.