Cubic Bezier Generator
Visually build a CSS cubic-bezier() easing curve — drag two control points, pick a preset, preview the motion, and copy the timing function, in your browser.
Drag the two handles, pick a preset, or type exact values below.
cubic-bezier(0.25, 0.1, 0.25, 1)🔒 Everything runs in your browser — nothing is uploaded.
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.
Frequently asked questions
Why can Y go above 1 or below 0, but X can't?
The X axis is time, which must always move forward, so a control point's X is clamped to 0–1. The Y axis is progress, and letting it pass 1 or dip below 0 is exactly what produces overshoot and anticipation (bounce) effects.
Where do I paste the result?
Use it in any transition or animation, for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); or as an animation-timing-function. It works in every modern browser.
Is anything uploaded?
No. The curve is computed in your browser as you drag the handles; nothing is sent to a server.