Build a CSS easing curve visually
Build a custom cubic-bezier() easing curve visually, with a live animation preview.
Adjust the 4 sliders, or start from a preset (ease-in-out, back, bounce, and more).
Hit Play to watch the curve animate a real element, re-triggerable as many times as you like.
Drop the cubic-bezier() value into any transition or animation-timing-function.
Frequently asked
What do the P1 and P2 points control?
A cubic-bezier() easing curve is defined by two control points, P1 (x1, y1) and P2 (x2, y2). The x values must stay between 0 and 1 (they represent progress through the transition's duration); y can go outside 0–1 to create overshoot effects like the 'back' or 'bounce' presets.
Why can Y go above 1 or below 0 but X can't?
X represents time, which only moves forward within the transition's duration, so it's clamped to 0–1. Y represents the animated property's progress, which can legitimately overshoot past its target or dip before it (bounce/elastic effects). CSS allows that.
How is this different from the built-in ease, ease-in, etc. keywords?
Those keywords are just named shorthands for specific cubic-bezier() values (the presets here include a few of them). This tool lets you fine-tune a fully custom curve instead of picking from the fixed built-in set.