Use the free CSS Cubic Bezier Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What an Easing Curve Is
When an element moves from one state to another, the way it accelerates and decelerates is called easing, and it changes how the motion feels more than the duration does. A linear move, at constant speed, feels mechanical and cheap. A move that starts fast and slows gently into place feels natural, because real objects behave that way: they accelerate, then friction and resistance ease them to a stop. The cubic-bezier function is how CSS describes that acceleration curve.
A cubic bezier curve is defined by four numbers: two control points, each with an x and a y value, between fixed start and end points. The x values must stay between 0 and 1, because they represent time progress. The y values can go outside that range, which creates anticipation effects, where the element first moves slightly backwards, and overshoot effects, where it passes its target and settles back.
How to Use the Tool
Set the four numbers, or pick a preset, and the canvas draws the curve with its control points and guide lines. Press Play to watch a box animate along the curve, so you can feel the easing instead of imagining it from numbers. When the motion feels right, copy the transition-timing-function line into your stylesheet.
Start from the presets and adjust. Ease is the default for most UI motion: it starts fast and ends gently, which suits hover states and panel openings. Ease-out starts fast and decelerates, which suits elements entering the screen, because they arrive quickly and settle softly. Ease-in starts slow and accelerates, which suits elements leaving, because they gather speed as they depart.
Reading the Curve
The curve’s shape tells you the story. A steep section means fast movement during that part of the time; a flat section means slow movement. A curve that hugs the bottom early and rises late means slow start, fast finish: ease-in. A curve that rises early and flattens late means fast start, slow finish: ease-out. A symmetric S shape means slow at both ends and fast in the middle: ease-in-out.
The control points shape the curve the way handles shape a path in a drawing tool. The first control point influences the early part of the motion, the second influences the late part. Moving the first point’s y value up makes the start faster; moving the second point’s y value down makes the end slower. The canvas shows the handles and their guide lines so you can connect each number to the shape it produces.
Overshoot and Anticipation
Y values outside 0 to 1 create the most expressive motion. A y value above 1 on the second control point makes the element overshoot its target, then settle back: the classic bounce-free spring feeling used for playful UI like the easeOutBack preset. A y value below 0 on the first control point makes the element pull slightly backwards before moving forward, an anticipation effect borrowed from animation, where a character crouches before jumping.
These effects are powerful and easy to overuse. Overshoot suits small, delightful moments: a button press, a badge appearing, a card popping in. It does not suit large layout changes, where overshoot looks like a glitch, or frequent motion, where it becomes distracting. Use expressive easing sparingly, on moments you want users to notice, and keep the rest calm.
Duration and Easing Together
Easing and duration work as a pair, and neither alone decides how motion feels. A 150-millisecond hover with ease-out feels instant and responsive. The same curve at 600 milliseconds feels deliberate and smooth. A 150-millisecond ease-in feels sluggish, because the slow start eats most of the short duration before anything visibly moves.
As a guide: hover feedback lives around 150 to 250 milliseconds, panel openings around 250 to 400, and page transitions around 400 to 600. Easing choice matters more as duration grows, because longer motion gives the curve time to show its character. Short motion mostly needs to start fast, which is why ease-out dominates quick interactions.
Accessibility and Motion
Not everyone experiences motion the same way. Some users have vestibular disorders that make animation genuinely uncomfortable, and browsers expose that preference through the prefers-reduced-motion media query. Respect it: wrap your transitions in a check that disables or shortens motion for users who ask for it. A site that animates respectfully keeps its polish for most users without harming the rest.
Also keep motion purposeful. Every animation should explain a change: where something came from, where it went, or what just happened. Decorative motion that explains nothing is the first thing to cut when a page feels busy. Easing curves are a tool for meaning, not decoration, and the best easing is often the one users never consciously notice.
Common Mistakes
The most common mistake is using ease-in for entrances. Elements that fade or slide in with ease-in appear to hesitate, because the slow start delays visible movement. Entrances want ease-out. Exits want ease-in. Another mistake is copying a dramatic overshoot curve from a demo into production UI, where it distracts from content instead of delighting.