CSS Cubic Bezier Generator

What is Online CSS Cubic Bezier Generator?

CSS Cubic Bezier Generator is a free online tool for generating CSS code for cubic bezier easing functions by getting info about the animation from time vs progress graph or directly previewing the animation.

When creating animations on web development, mostly linear transitions are used since most animations are very short and users may not feel the difference between a linear CSS animation and an animation which has an easing function. But, if you are working with complex animations which has a duration above ~0.5s, it is important to use more natural easing functions or elastic movements which attracts users more. There are predefined easing functions in CSS which can be used for better animations which are ease, ease-in, ease-out and ease-in-out. When these easing types are not sufficient, best way to manage an animation timing in CSS is to use Cubic Bezier easing functions.

Time vs Progress graph for Cubic Bezier Easing

There are 4 parameters in CSS cubic Bezier animation timing function which defines the positions of 2 points, P1 & P2. First point P1 identifies the progress at the start of the animation while P2 identifies the final part. Cubic bezier curve is defined in coordinate system starting from point (0,0) to point (1,1). The path between these points describes the progress of the CSS animation.

• x1, y1: x and y coordinates of P1 (Point 1) which defines start of animation.
• x2, y2: x and y coordinates of P2 (Point 2) which defines end of animation.

By defining x and y coordinates of these 2 points, you can define the progress of all animation with cubic Bezier function in CSS. x values are limited between 0 and 1 while y values may be between minus infinity to plus infinity. But, in terms of achieving natural animation progress, it is limited between -2 to +2 in the tool.

How to use Online CSS Cubic Bezier Generator?

You can generate CSS code for cubic Bezier animation timing functions by following these easy steps.

1. First, you have to select 4 coordinates for constructing the cubic Bezier starting and ending points.
2. Animation can be previewed online by pressing the play icon. If the result is not satisfactory, you can fine tune it easily by changing the coordinates. Also, the graph is helpful to predict the CSS animation progress. Its path and slopes give ideas about the result.
3. Default animation duration is one second, but you can change it between a range from 0 to 5 seconds. Also, predefined CSS animation timing functions can be selected from the list see how they behave.
4. CSS code or cubic Bezier coordinates can be copied and used in your project by just pasting it in your stylesheet.

Frequently asked questions

What is an easing curve for?

It decides how an animation distributes its time. Linear motion reads as mechanical because nothing in the physical world starts and stops instantly. A curve that begins slowly and settles gently is what makes an interface feel considered rather than abrupt.

How do I read the graph?

Time runs along the bottom, progress up the side. A steep section means the element is covering ground quickly at that moment; a flat section means it has slowed down. The two handles bend the curve between start and finish.

Can the curve go outside 0 and 1?

Yes, and that is how you get overshoot. Pulling a handle above the top makes the element travel past its destination and come back, which reads as bounce or elasticity. Useful in small doses.

Which easing should I use by default?

Something that starts fast and ends slow for things entering the screen, and the reverse for things leaving. ease-out is a safe default for most interface motion; linear is best kept for things that genuinely are mechanical, like a progress bar.

Where does the generated value go?

Into transition-timing-function or animation-timing-function. It pairs naturally with the CSS Loader Generator if you are tuning a spinner.