Cubic Bezier Generator
Design CSS cubic-bezier easing curves visually and copy the value.
cubic-bezier(0.250, 0.100, 0.250, 1.000)
About the Cubic Bezier Generator
The cubic bezier generator lets you shape CSS easing curves by dragging two control points and reading back the exact cubic-bezier() value you need. Easing functions describe how a value changes over the life of an animation or transition, so the curve you draw here is the difference between motion that feels mechanical and motion that feels considered.
A cubic bezier curve is defined by four numbers: the x and y of two control points. The x axis represents time from start to finish and stays clamped between 0 and 1. The y axis represents progress, and it can dip below 0 or rise above 1 to create anticipation and overshoot, the springy feel you see in modern interfaces. Watching the curve change as you drag a handle makes those numbers intuitive instead of abstract.
Use the presets to start from a familiar baseline. The ease, ease-in, ease-out, ease-in-out, and linear buttons load the standard CSS keyword equivalents so you can nudge them toward something custom. When the curve looks right, copy the value and drop it straight into a transition-timing-function oranimation-timing-function declaration.
Everything happens in your browser. The curve is computed locally with plain math and SVG, no libraries and no network calls, so nothing you do here is ever uploaded or stored on a server.
Reach developers and designers who use these tools every day. Privacy-first, no trackers.
Frequently asked questions
What does a cubic-bezier value mean in CSS?
The four numbers are the coordinates of two control points, written as x1, y1, x2, y2. The x values are time and must stay between 0 and 1, while the y values are animation progress and may go outside that range to create overshoot or anticipation.
How do I use the generated value?
Copy the cubic-bezier(...) string and paste it as the value of transition-timing-function or animation-timing-function in your CSS, for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1).
Can the curve go above 1 or below 0?
The y values can, and that is how you get bounce or pullback effects. The x values are clamped between 0 and 1 because time cannot move backward within a single easing function.
What is the difference between ease and ease-in-out?
The ease keyword starts a little fast, while ease-in-out is symmetric, accelerating gently at the start and decelerating gently at the end. Load each preset to compare the curves side by side and feel the difference.
Is my work uploaded anywhere?
No. The editor runs entirely in your browser using local math and SVG rendering. No control point data, curve, or copied value is ever sent to a server or stored remotely.