CSS Easing Generator
Drag two control points to design a cubic-bezier easing curve. Animated preview block plus copy-ready CSS.
100% in your browser. Files never uploaded.
CSS
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
How to use
- 1Drag the two control pointsOr pick a preset.
- 2Watch the live animationA square slides with the chosen curve.
- 3Copy the CSSDrop into transition-timing-function.