CSS Cubic-Bezier Easing Generator
Drag the curve, preview the motion, copy the timing function.
Drag the curve, preview the motion, copy the timing function. Free and 100% private — runs entirely in your browser, nothing is ever uploaded.
About CSS Cubic-Bezier Easing Generator
The CSS Cubic-Bezier Easing Generator is a visual tool for building custom easing curves and copying the exact cubic-bezier() value for your CSS transitions and animations. Drag the two control handles on the curve, watch a live animated box move with that timing, then copy the result. It runs entirely in your browser, so nothing you enter is uploaded anywhere.
How to use CSS Cubic-Bezier Easing Generator
- Open the CSS Cubic-Bezier Easing Generator and start from a preset like ease-in-out, or drag the two handles (point 1 and point 2) directly on the curve editor.
- Fine-tune each point with the X and Y sliders or number inputs. X is clamped to 0 to 1 as CSS requires, while Y can overshoot below 0 or above 1 for bounce and anticipation effects.
- Watch the live preview box slide back and forth with your easing, and press Replay to restart the animation whenever you tweak the curve.
- Try the overshoot or back-in-out presets, or set a Y value like 1.55, to get a bouncy or springy finish.
- Copy the full transition-timing-function declaration with the CSS copy button, or use Copy value to grab just the cubic-bezier() function for keyframes and inline styles.
- Paste the value into your stylesheet on a transition or animation property and reload your project to see it in action.
Frequently asked questions
- What is a cubic-bezier easing curve?
- A cubic-bezier() function defines how an animation accelerates and decelerates over its duration using four numbers: x1, y1, x2, y2. These set two control points that bend the timing curve, letting you go far beyond the built-in ease, linear and ease-in-out keywords for more natural or expressive motion.
- Why is the X value limited to 0 to 1 but Y is not?
- The CSS spec requires the X coordinates of both control points to stay within 0 to 1, so the tool clamps them automatically. Y is allowed to go outside that range (this tool permits roughly -1 to 2), which is exactly how you create overshoot, bounce and anticipation effects like the back-in-out and overshoot presets.
- How do I make a bouncy or springy animation?
- Push a Y value above 1 so the curve overshoots its endpoint, for example set y2 to 1.55, or start from the overshoot preset. For an anticipation effect where motion pulls back before moving forward, use a negative Y such as the anticipate preset. The live preview shows the bounce immediately.
- Does the generated value work with transitions and keyframes?
- Yes. Copy the full declaration to drop straight into a transition-timing-function, or use Copy value to get just the cubic-bezier() function. That bare value works anywhere a timing function is accepted, including the animation property and animation-timing-function inside @keyframes.
- Is my data private when I use this tool?
- Completely. The CSS Cubic-Bezier Easing Generator runs 100% in your browser with no servers involved. Your curves are computed locally and nothing is uploaded. Your last curve is saved only in your own browser storage so it is there when you return.