Cubic Bezier Generator
The free cubic-bezier() editor — drag the curve to design a custom CSS easing function.
A free online cubic bezier generator: drag the two control points on the graph (or type exact values) to shape a custom CSS easing curve, preview it live, then copy the code — cubic-bezier() CSS, the Web Animations API, Tailwind, Framer Motion, GSAP, or React Spring. Runs in your browser — no signup.
What is cubic-bezier()?
You'll see this written as cubic bezier css, or searched for as a bezier curve generator — they're the same thing either way: cubic-bezier(x1, y1, x2, y2) is a CSS easing function — a value you can pass to transition-timing-function or animation-timing-function to control how a transition or animation accelerates and decelerates over time, instead of moving at a constant linear speed.
The curve is defined by two fixed points, (0,0) and (1,1), and two control points you choose: P1 (x1, y1) and P2 (x2, y2). Dragging those control points bends the curve, which changes how the animated value's velocity rises and falls — that's exactly what this generator lets you do visually.
How CSS easing timing functions work
- Drag a handle (P1 or P2) on the graph above, or type exact x1/y1/x2/y2 values into the number fields — both stay in sync.
xrepresents elapsed time (always between 0 and 1) andyrepresents animation progress — which can overshoot past 0 or 1 for bounce-style curves.- Click Replay to watch the live preview move using your curve, and adjust the duration slider to feel it at different speeds.
- Pick a named preset as a starting point, or copy the generated code straight into your project.
Named easing reference
Every standard CSS easing keyword is itself just a cubic-bezier() shorthand. Here's what each one expands to, plus a few common Penner and Material Design curves:
| Name | cubic-bezier() equivalent |
|---|---|
| linear | cubic-bezier(0, 0, 1, 1) |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
| ease-in-back | cubic-bezier(0.36, 0, 0.66, -0.56) |
| ease-out-back | cubic-bezier(0.34, 1.56, 0.64, 1) |
| ease-in-out-back | cubic-bezier(0.68, -0.6, 0.32, 1.6) |
| Material standard | cubic-bezier(0.4, 0, 0.2, 1) |
Click any preset in the generator above to load its exact curve and keep tweaking from there.
linear() vs cubic-bezier()
Both are CSS easing functions, but cubic-bezier() is defined by exactly 4 numbers and can't bounce past its endpoints more than once. The newer linear() function accepts an arbitrary list of points, so it can express multi-bounce or spring-like motion that cubic-bezier() simply can't reach. This generator focuses on the classic, universally-supported cubic-bezier() function — full linear() editing is on the roadmap.
transition-timing-function vs animation-timing-function
Both properties accept the exact same easing values, including cubic-bezier(). transition-timing-function shapes a CSS transition (triggered by a state change, like :hover), while animation-timing-function shapes a @keyframes animation. Copy the same value generated here into whichever property matches what you're building.
Frequently asked questions
Is this cubic bezier generator free?
Yes. Dragging the curve, previewing it live, and copying every code format are completely free with no signup. The generator runs entirely in your browser.
How do I create a custom CSS easing curve?
Drag either of the two control-point handles on the graph, or type exact x1/y1/x2/y2 values into the number fields — both stay in sync. Click Replay to see the live preview move using your curve, then copy the cubic-bezier() CSS or one of the other code formats.
What do the P1 and P2 control points mean in cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) defines a curve whose start (0,0) and end (1,1) points are fixed. P1 (x1, y1) and P2 (x2, y2) are the two control points you drag — they pull the curve's velocity toward themselves, which is what creates acceleration, deceleration, or bounce.
Can the y-values go above 1 or below 0?
Yes. The CSS spec requires x1 and x2 to stay between 0 and 1, but y1 and y2 can be any number. Pushing a y-handle past 0 or 1 is exactly how overshoot and anticipation curves like ease-out-back are built.
What's the difference between cubic-bezier() and linear() in CSS?
cubic-bezier() defines a curve from exactly 4 numbers (2 control points) and cannot bounce past its endpoints more than once. The newer linear() function accepts an arbitrary list of points, so it can express multi-bounce or spring-like easing that cubic-bezier() can't. This tool currently focuses on the classic 4-point cubic-bezier() function; full linear() editing is on the roadmap.
transition-timing-function vs animation-timing-function — what's the difference?
Both properties accept the exact same easing values, including cubic-bezier(). transition-timing-function controls the curve of a CSS transition (triggered by a state change), while animation-timing-function controls the curve of a @keyframes animation. Copy the same generated value into whichever property matches what you're building.
Can I use these curves in JavaScript, Tailwind, Framer Motion, GSAP, or React Spring?
Yes — switch the code panel's tab to get a ready-to-paste snippet for each: raw CSS, the Web Animations API's easing option, a Tailwind transitionTimingFunction / v4 @theme entry, a Framer Motion ease array, a GSAP CustomEase string, or a React Spring easing function.
Does this work on mobile and touch devices?
Yes. The control-point handles are touch-friendly — drag them with a finger the same way you would with a mouse, and the graph won't hijack your scroll gesture while you drag.
Related tools: CSS Gradient Generator · Box Shadow Generator · Border Radius Generator · All Tools →
