Cubic Bezier Generator

What a cubic-bezier easing curve is

CSS animations and transitions move between two states over time, and the timing function decides how that progress is paced — slow-then-fast, fast-then-slow, or with a little overshoot. cubic-bezier(x1, y1, x2, y2) defines that pacing with two control points on a curve that runs from the start (0,0) to the end (1,1). This editor lets you shape the curve by dragging the two handles, so you can feel the motion instead of guessing numbers.

How to use it

Drag the blue and purple handles to bend the curve, or pick a preset like ease, ease-in-out or linear as a starting point. Type exact values into the X/Y fields when you need precision — the two X values are kept inside 0–1 (required by CSS) while Y can go beyond it to create bounce or anticipation. The moving dot previews the real motion, and one click copies the cubic-bezier() value or a full transition-timing-function declaration ready to paste into your stylesheet. To put the curve in a whole transition declaration with a property, a duration and a delay, use the CSS Transition Generator.