Micro Tools
Advertisement

Bezier curve maker

Tune a cubic-bezier timing function with four sliders and watch the curve draw live. Preview it on an animated dot, then copy the CSS timing value.

Control points

Drag the sliders. The curve and the animation update live.

Curve, animation and CSS
Advertisement

Reading a bezier timing curve

The curve maps time on the x axis to progress on the y axis. A steep start means fast initial motion, a flat middle means a pause, and overshoot happens when the curve leaves the 0 to 1 band, which is what gives springy easings their bounce past the target.

Why x stays between 0 and 1

CSS requires the x coordinates of a cubic-bezier to stay within 0 and 1 because time cannot go backward. The y values may overshoot, which is how ease-out-back effects work. This tool clamps x1 and x2 to the valid range.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Bezier Curve Maker FAQs

What is the difference between ease-in and ease-out?
Ease-in starts slow and accelerates, which feels like something powering up. Ease-out starts fast and decelerates, which feels responsive and is the better default for UI feedback like buttons and menus.
How do I get a bouncy spring effect?
Push y1 above 1 or y2 below 0 so the curve overshoots. Try cubic-bezier(0.34, 1.56, 0.64, 1), the classic ease-out-back: it sails slightly past the target then settles.
Can I use cubic-bezier for animations too?
Yes, animation-timing-function accepts the same values as transition-timing-function. The copied CSS shows both forms so you can paste whichever your project uses.
Why does my animation look robotic with linear?
Linear moves at constant speed, which real objects never do. Physical motion always accelerates and decelerates. Even a subtle ease-out makes interface motion feel dramatically more natural.
How long should a UI transition be?
150 to 300ms for hover feedback and small UI changes, 400 to 600ms for panels and page transitions. Longer than a second feels sluggish unless it is a deliberate showcase animation.
Advertisement