CSS easing function generator

How to use the CSS easing function generator

  1. Pick a preset — ease, ease-in, ease-out, ease-in-out — or start from linear to build your own.
  2. Drag the two cubic-bezier control points to reshape the curve. The preview ball animates along the curve in real time.
  3. Paste a cubic-bezier(…) expression into the input to import an existing easing (e.g., from another design system).
  4. Copy the CSS cubic-bezier() value for use in transition or animation properties.

When to use it

Custom cubic-bezier easings make motion feel on-brand — overshoots for playful UIs, sharp ease-outs for productivity apps. Use the browser presets (ease-in-out) when you just need 'not linear' and don't want to think about it. Pair with short durations (150-250ms) for micro-interactions and longer (400-600ms) for page-level transitions. Alternative: easings.net is a visual reference without interactive curve editing.

Frequently asked questions

What's the difference between ease-out and ease-in?
ease-out starts fast and decelerates — feels natural for elements entering the screen. ease-in starts slow and accelerates — feels right for elements leaving. ease-in-out combines both and is the safest default.
Do cubic-bezier values above 1 or below 0 work?
Yes — the Y coordinates of the control points can go outside [0, 1] to create overshoot (value >1) or anticipation (value <0). Browsers render the bounce correctly.
Can I use this for JavaScript animations?
Yes. GSAP, Framer Motion, and Popmotion all accept the same cubic-bezier(x1, y1, x2, y2) values — copy from this tool directly.
Why does linear feel wrong?
Nothing in the physical world moves at constant speed from a full stop. Linear motion reads as mechanical. Even ease is a meaningful improvement.

Related tools

Last updated: 2026-04-22