Cubic bezier easing editor
Drag the curve, watch it race a linear square, and copy the easing as CSS, as a Tailwind arbitrary value or as a theme token.
Your curvecubic-bezier(0.4, 0, 0.2, 1)
linearlinear
transition.csscss
.panel {
transition: transform 3000ms cubic-bezier(0.4, 0, 0.2, 1);
}
usage.tsxtsx
<div class="transition-transform duration-3000 ease-[cubic-bezier(0.4,0,0.2,1)]" />
theme.csscss
@theme {
--ease-house: cubic-bezier(0.4, 0, 0.2, 1);
--duration-house: 3000ms;
}
Questions
How do I read the curve?+
Time runs left to right, progress bottom to top. A steep start means it leaves quickly and settles slowly, which is what makes an exit feel decisive and an entrance feel calm.
Why is there a linear square below mine?+
Because a curve is judged against something. Linear is the reference every reader already has, and the difference between the two is exactly what your easing is buying.
What about overshoot?+
Pull a handle above the box and the value passes 1 before settling, which is how a spring reads. It is worth it on entrances and wrong on anything that has to line up with the pointer.
Related tools
Glassmorphism generatorBuild a frosted panel over a real backdrop: tint, blur, saturation, border and radius, copied as CSS or as a full set of Tailwind utilities.CSS filter playgroundStack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class.Border radius generatorSet each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.