What is the Cubic Bezier Generator?
The timing function controls how a CSS transition or animation speeds up and slows down. Drag the two handles on the curve to create your own cubic-bezier(), compare it with standard easings, preview it on a moving box and copy the code. Presets include easeOutBack (overshoot), easeInOutQuart and more.
How to use the Cubic Bezier Generator
- Drag the pink and blue handles (or type values).
- Press Play to compare with linear motion.
- Copy the transition-timing-function code.
Popular easings
- ease: cubic-bezier(0.25, 0.1, 0.25, 1)
- ease-in-out: cubic-bezier(0.42, 0, 0.58, 1)
- easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1)
- easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1)
This Cubic Bezier Generator is 100% free, needs no signup and runs privately in your browser – on phone, tablet or computer.
Last updated: · By NodifyTech