Skip to content
TextArray1.87.0
100% local

CSS easing and transition generator

Build a CSS transition rule from a curve preset or custom cubic-bezier points, with a text graph of the motion.

11
Output
Related tools
CSS clamp() generatorDeveloper tools
CSS box-shadow generatorDeveloper tools
CSS unit converterDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS easing and transition generator
Pick the properties you want to animate, set a duration and delay, and this tool writes the transition rule for you — as plain CSS or as a Tailwind config block you can drop into tailwind.config.js. It covers the common named curves (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, a curve that overshoots past its target before settling, which is not a native CSS keyword and always needs to be spelled out as cubic-bezier().
Below the generated rule, a text graph plots the curve's progress at each point in time — from 0 at the start of the animation to 1 at the end, with a bar for each sample so you can see the acceleration and any overshoot without opening dev tools. Switch to "Custom cubic-bezier()" and enter your own four control points to preview a curve someone handed you, or one you copied from a design tool; the first and third points must stay within 0–1 on the time axis (that's a CSS requirement), but the y values can go outside 0–1, which is exactly how bounce and back easings work.
The properties field takes a comma-separated list — transform, opacity, background-color, or a CSS custom property like --panel-width — and the tool writes one line per property so the rule stays easy to scan. Duration and delay are in milliseconds; the number of graph rows is adjustable from 2 up to 41 for a coarser or finer read of the curve.
Everything runs locally in your browser: nothing you type is sent anywhere. Copy the result, download it as a .txt file, or send the output straight back into the input to keep adjusting it.
FAQ
What does "ease-out-back" actually do?
It briefly overshoots past the end value before settling back — useful for a card that pops slightly larger before landing at its final size. Because it is not a built-in CSS keyword, the generator always writes it out as a full cubic-bezier() function.
Why does the custom curve clamp my x values but not my y values?
The CSS spec requires the two x control points of a cubic-bezier() to stay between 0 and 1 so time always moves forward; the y control points are free to go outside that range, which is what produces overshoot and bounce effects.
What do the numbers in the graph mean?
Each row is one sample in time, from t=0 (animation start) to t=1 (animation end), with the curve's output value at that moment and a bar sized to it — so a row with a value above 1 or below 0 shows the curve overshooting its target.
Can I use the Tailwind output directly?
Yes. It is a ready-to-paste theme.extend block for tailwind.config.js, with the duration, delay, property list and timing function each under a "custom" key you can rename to fit your design tokens.
Is my CSS uploaded anywhere?
No. The transition rule and the curve graph are both generated entirely in your browser — nothing you enter here is sent to a server.