Cubic Bezier Generator
Design CSS easing curves visually. Drag control points on the bezier curve, preview live animations, and copy cubic-bezier() CSS in one click.
About this tool
The transition-timing-function and animation-timing-function CSS properties accept a cubic-bezier(x1, y1, x2, y2) value that describes a custom easing curve with four numbers. The X axis is time (0 → 1) and the Y axis is progress (0 → 1); the two control points shape how the animation accelerates and decelerates.
Drag the two handles on the graph or move the sliders to shape the curve — the box on the right plays the animation in real time. Example: cubic-bezier(0.68, -0.55, 0.265, 1.55) overshoots slightly past the end point, producing a bounce effect (the "bounce-ish" preset).
Y values outside the 0–1 range create overshoot and anticipation, which is why the sliders allow -0.5 to 1.5. The presets cover the standard CSS keywords (ease, ease-in, ease-out, ease-in-out, linear) plus a few expressive curves.
FAQ
What do the four numbers in cubic-bezier() mean? ›
They are the x and y coordinates of the two control points: cubic-bezier(x1, y1, x2, y2). X1 and x2 must stay between 0 and 1 (they map to time); y1 and y2 can go outside 0–1 to create overshoot and bounce.
How is this different from the ease, ease-in, ease-out keywords? ›
Each keyword is just a shorthand for a fixed cubic-bezier value: ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is cubic-bezier(0.42, 0, 1, 1), and so on. This tool lets you craft a custom curve instead of being limited to those five.
Can I get a bounce or elastic effect? ›
Yes. Push the y values past 1 (overshoot) or below 0 (anticipation). The "bounce-ish" and "elastic" presets in this tool are good starting points — tweak the handles to tune how far the animation overshoots.
Can I import a cubic-bezier() value I found elsewhere? ›
Yes. Paste a value like cubic-bezier(0.68, -0.55, 0.265, 1.55) into the import box above the graph and press Enter (or click Import). The handles and sliders jump to that curve so you can preview and tweak it.
How do I share a curve with someone? ›
Click "Share link" to copy a URL that encodes the current curve. Opening that link restores the exact same easing curve, duration, and preview.