Cubic Bezier Easing Generator
Design CSS cubic-bezier easing curves with two draggable control points, presets, a live animation preview and copy-ready code, all in your browser.
Loading Cubic Bezier Easing Generator… If nothing happens, please enable JavaScript.
Easing is what separates animation that feels alive from animation that feels mechanical. In the real world nothing moves at a constant speed: objects accelerate as they start, decelerate as they stop, and sometimes overshoot before settling. CSS captures this with the timing function, and the most flexible timing function is cubic-bezier, which lets you describe an entire acceleration curve with just four numbers. Those numbers define the two control points of a Bezier curve whose horizontal axis is time and whose vertical axis is progress, and the shape of that curve dictates exactly how an element speeds up and slows down over the course of a transition or animation.
Frequently asked questions
Is anything uploaded when I create an easing curve?
What do the four numbers in cubic-bezier mean?
Why can I drag the handles up past the top or below the bottom but not left or right of the box?
What is the difference between ease-in, ease-out, and ease-in-out?
How do I create a bouncy or springy effect?
Does the preview show the real motion?
Where do I use the generated value in my CSS?
Do custom cubic-bezier curves work in all browsers?
About Cubic Bezier Easing Generator
The trouble with cubic-bezier is that the four numbers are almost impossible to picture in your head. A value like cubic-bezier(0.68, -0.55, 0.27, 1.55) means nothing until you see the curve it draws and the motion it produces. This generator makes that concrete. It shows the curve on an interactive grid with two draggable control points wired to pointer events, so you can pull the handles with a mouse or a finger and watch the curve reshape in real time. The horizontal position of each handle is constrained to the valid zero-to-one range required by the CSS specification, while the vertical position is free, which is what allows anticipation and overshoot effects where progress dips below zero or rises above one.
A row of presets gives you the named CSS keywords as starting points: linear for constant speed, ease for the gentle default, and ease-in, ease-out, and ease-in-out for the common acceleration patterns. From any preset you can drag the handles to fine-tune the feel. Crucially, the tool includes a live preview: click the track or the play button and a marker animates across it using your exact curve, so you judge the motion by how it actually moves rather than by the geometry of the line. The generated cubic-bezier value and a full CSS declaration update continuously and copy to your clipboard in one click.
The whole tool runs locally in your browser. There is nothing to upload, no account, and no tracking, and it keeps working offline once the page has loaded, because the entire job is computing a curve and producing a short string of CSS. The combination of a visible curve, draggable points, named presets, and a real motion preview turns the abstract four-number cubic-bezier syntax into something you can feel your way to, which is the fastest path to easing that looks right in your interface.
From car bodies to web animation: the long life of the Bezier curve
The mathematics behind every CSS easing curve was developed not for screens but for sheet metal. In the late 1950s and 1960s, the French car manufacturers Renault and Citroen needed a precise way to describe the smooth, flowing surfaces of car bodies so that they could be machined accurately. Pierre Bezier, an engineer at Renault, popularised and published the curves that now bear his name, while Paul de Casteljau, working in secret at Citroen, independently developed the same ideas and the elegant algorithm for evaluating them. Because de Casteljau's work was kept confidential, the curves became known as Bezier curves.
The key insight is that a complex curve can be defined by a small number of control points, where the curve passes through the endpoints and is pulled toward, but not through, the points in between. This made Bezier curves perfect for the emerging field of computer graphics. They became the foundation of vector drawing in PostScript and PDF, the pen tool in every illustration program, the outlines of the fonts you are reading right now, and the motion paths in animation software. A handful of control points can describe almost any smooth shape or movement, which is precisely the economy that engineers in the 1960s were after.
CSS adopted a cubic Bezier curve, one with two control points between fixed endpoints, as its timing function because it captures the full vocabulary of natural motion with just four numbers. The named keywords are not separate mechanisms but simply convenient labels for specific cubic-bezier values: ease is cubic-bezier(0.25, 0.1, 0.25, 1), and linear is cubic-bezier(0, 0, 1, 1). When you drag the handles in a tool like this one, you are manipulating the same control points an automotive engineer once used to shape a fender, now bending time and progress instead of metal to make an interface feel responsive and alive.