CSS Easing / Cubic-Bezier Generator | Ultimate Design Tools

What Is an Easing Function?

Easing functions control how animations accelerate and decelerate — they're the difference between robotic linear motion and natural, organic movement. Every great animation uses easing to mimic real-world physics: objects don't instantly reach full speed, and they don't stop abruptly.

This tool lets you design custom cubic-bezier curves by dragging control points, preview the easing in real time, and compare it against standard presets like ease, ease-in, ease-out, and ease-in-out.

Common Easing Patterns

ease-out (most common) — fast start, gentle stop. Use for elements entering the screen. ease-in — slow start, fast end. Use for elements exiting. ease-in-out — slow start and end, fast middle. Use for elements moving within the viewport. cubic-bezier with overshoot — values above 1.0 create a bounce past the target and snap back, adding playfulness.

How to Use This Easing Wizard

Choose a preset easing — Start with a common preset — ease, ease-in, ease-out, ease-in-out, or one of the named curves like bounce, elastic, or snap.
Customize the cubic-bezier — Drag the control points on the bezier curve editor to shape the exact acceleration and deceleration you want.
Preview the animation — Watch a ball animate along your curve in real time. The visual preview shows exactly how elements will move.
Compare multiple curves — Toggle between different easing functions to find the one that feels right for your animation.
Copy the CSS — Grab the cubic-bezier() or linear() function value.

Tips and Best Practices

→ Ease-out for entrances, ease-in for exits. Elements entering the screen should decelerate (ease-out). Elements leaving should accelerate (ease-in). This follows natural motion physics.
→ Avoid linear for UI animations. Linear motion feels robotic and unnatural. Almost every UI animation benefits from some form of easing — even subtle ease-in-out feels dramatically better.
→ Use the new linear() function for complex curves. CSS linear() allows multi-point easing curves that can create bounce, elastic, and spring effects — previously only possible with JavaScript.
→ Match easing to the interaction type. Quick, snappy easings (0.2–0.3s ease-out) for buttons and toggles. Smooth, longer easings (0.3–0.5s ease-in-out) for page transitions and modals.

Frequently Asked Questions

What is CSS easing?

Easing controls the acceleration curve of transitions and animations. Instead of constant speed (linear), easing makes motion start slow and end fast (ease-in), start fast and end slow (ease-out), or both (ease-in-out).

What is cubic-bezier?

A CSS function defining a custom easing curve using four control points (x1, y1, x2, y2). The curve maps time to progress. Values outside 0-1 on the y-axis create bounce and overshoot effects.

Which easing function should I use?

ease-out for entering elements, ease-in for exiting elements, ease-in-out for elements moving within the viewport. This tool lets you visualize and compare all options.

What is an easing function?+

An easing function defines the rate of change of a CSS animation or transition over time. Instead of moving at a constant speed (linear), easing functions create acceleration, deceleration, bouncing, or elastic effects. They're specified using keywords (ease, ease-in-out), cubic-bezier() values, or the newer linear() function.

What is cubic-bezier?+

cubic-bezier() defines a custom easing curve using four control point values between 0 and 1 (though Y values can exceed this range for overshoot effects). The format is cubic-bezier(x1, y1, x2, y2). The built-in CSS keywords are shortcuts: ease = cubic-bezier(0.25, 0.1, 0.25, 1.0), ease-in = cubic-bezier(0.42, 0, 1.0, 1.0), etc.

How do I create a bounce effect in CSS?+

Use the CSS linear() function with multiple keyframe points that overshoot and settle: linear(0, 0.63, 0.98, 1.05, 0.98, 1.01, 1). Or use cubic-bezier() with Y values above 1 for overshoot: cubic-bezier(0.34, 1.56, 0.64, 1). For complex spring physics, consider the Web Animations API or a library like Framer Motion.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools