Easing Function Generator

An easing function controls the rate of change of a CSS animation or transition over time. Rather than moving an element at a constant speed from start to finish, an easing function shapes the velocity — accelerating at the beginning, decelerating toward the end, or even momentarily reversing direction for a bouncy effect.

Every CSS transition and animation accepts a timing function. The browser's built-in keywords — ease, ease-in, ease-out, and ease-in-out — are themselves just shorthand for specific cubic-bezier() values. By using the easing function generator, you gain precise control over those same four parameters, letting you craft exactly the motion feel your design requires.

Easing functions are foundational to what designers call "motion design." A linear animation feels robotic and digital. A well-tuned easing curve makes interfaces feel physical and alive — objects that accelerate like real things do under gravity, or decelerate as if slowing to a stop. This is why professional design tools like Figma, After Effects, and CSS all center easing curves as the primary motion control.

The most expressive easing format CSS supports is the cubic-bezier() function, which this generator produces. It accepts two control points that bend a parametric curve between a fixed start at (0, 0) and a fixed end at (1, 1). The horizontal axis represents time (0% to 100% of duration) and the vertical axis represents progress (0% to 100% of value change). Placing control points outside the vertical [0, 1] range creates the overshoot and elastic effects seen in modern UI frameworks.

This free online easing function generator makes it trivial to explore the full design space: drag sliders to reshape the curve in real time, preview the animation at your chosen duration, then copy the ready-to-paste CSS directly into your stylesheet.

The CSS cubic-bezier(x1, y1, x2, y2) function is built on the mathematics of a parametric cubic Bézier curve. The curve is defined by four points: the start P₀ = (0, 0) and end P₃ = (1, 1) are always fixed by the spec; you supply the two intermediate control points P₁ = (x1, y1) and P₂ = (x2, y2).

The parametric equations evaluate the curve position at each internal parameter value t as t sweeps from 0 to 1:

• X(t) gives the fraction of elapsed time.
• Y(t) gives the fraction of the animated value that has changed.

The browser solves for t given the actual elapsed time ratio, then reads Y(t) to know how far along the value should be. Because the X axis is constrained to [0, 1] the x1 and x2 parameters must also stay within [0, 1] for the function to represent a valid time mapping. The y1 and y2 parameters, however, may go outside [0, 1] — this is what produces overshoot, bounce, and elastic effects that momentarily exceed or undershoot the final value.

The generator ships with eight ready-to-use presets that cover the most common motion design needs. Each preset corresponds to a well-known animation personality:

When y1 or y2 falls outside [0, 1] (such as −0.55 in Elastic or 1.55 in Bounce), the animated property will briefly exceed its starting or ending value. This is perfectly valid CSS and is exactly how overshoot effects are achieved without JavaScript.

Motion design best practice treats enter and exit animations differently. Elements entering the viewport should decelerate as they arrive — they appear to land. This calls for an ease-out or a custom deceleration curve with a high x1 value like (0, 0, 0.58, 1). Elements leaving the viewport should accelerate as they go — they appear to launch. Use an ease-in curve such as (0.42, 0, 1, 1) for exit transitions.

For two-state toggles — drawers, accordions, modals — an ease-in-out reads naturally because the element has an origin and a destination. The symmetric slow-fast-slow pattern matches the physical intuition of an object moving between two resting points.

Elastic and Back presets belong on micro-interactions: button presses, notification badges, icon animations, and toggle switches. Their overshoot conveys energy and responsiveness. Avoid them on large layout shifts where the visual overshoot will read as a layout bug rather than a design detail.

For data dashboards and utility interfaces, a conservative ease or even a linear curve keeps the animation from distracting the user. Reserve expressive easing for delight moments, not routine updates.

Duration interacts with easing perception. A 200 ms ease-out feels snappy and confident. The same curve at 800 ms feels slow and labored. Tune duration and easing together: use the generator's preview slider set to your intended duration before copying the CSS.

Finally, always respect the prefers-reduced-motion media query. Wrap your transitions in a media query so users who have requested reduced motion experience instant state changes instead of animated ones. The easing curve itself is harmless, but the animation duration can cause discomfort for motion-sensitive users.

The generator produces two ready-to-use CSS declarations for every curve you design:

• transition-timing-function — applies the easing to a CSS transition. Pair it with transition-property and transition-duration.
• animation-timing-function — applies the easing to a CSS @keyframes animation. You can place it on the animation rule itself or inside individual keyframe stops for segment-specific easing.

Copy the value from the "Cubic Bezier" result card — for example cubic-bezier(0.68, -0.55, 0.265, 1.55) — and use it anywhere a CSS timing-function is accepted, including inside transition shorthand:

/* Transition shorthand */
.card {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Animation rule */
.badge {
  animation: pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

In JavaScript animation libraries such as GSAP, Motion One, or Framer Motion, you can pass the four numeric values directly as an array [x1, y1, x2, y2] — check each library's API for the exact property name. Framer Motion, for example, accepts ease: [0.42, 0, 0.58, 1].

For design tokens or Tailwind CSS, you can define custom easing values in your tailwind.config.js under theme.transitionTimingFunction and reference them as utility classes across your project, keeping motion consistent at scale.

Choosing a great easing function is only half the equation — the animated property also matters enormously for performance. Modern browsers can animate transform and opacity on the GPU compositor thread, meaning those animations run at 60 fps or higher without triggering layout recalculation. Properties like width, height, top, left, margin, and padding force the browser to recalculate layout on every frame, creating jank regardless of how smooth your easing curve is.

Use transform: translateX() instead of animating left, and transform: scale() instead of animating width or height. Combine with will-change: transform to hint to the browser to promote the element to its own compositing layer — but apply this hint sparingly, as each composited layer consumes GPU memory.

Easing curves with very steep initial slopes (high velocity at t=0) can appear to stutter on lower-end devices even for compositor-friendly properties if the frame budget is already tight. In those cases, a slightly softer easing with a moderate start velocity will appear smoother in practice than a theoretically sharper curve. Always test on real target hardware, not just development machines.

When you have many elements animating simultaneously — staggered list items, for example — offset start times with animation-delay rather than making each element's curve more complex. Simple, consistent easing applied with staggered delays reads as more polished than complex per-element curves.