CSS Cubic Bezier Generator
CSS transitions and animations are defined not just by their duration, but by how they accelerate and decelerate over time. The cubic-bezier() function gives you full control over that motion - letting you create easing curves that feel natural, snappy, gentle, or dramatic.
Drag the two control handles on the graph to reshape the curve in real time. Preview your easing with a live animation, compare it against standard CSS curves, then copy the output directly into your stylesheet.
Cubic Bezier Visualiser
cubic-bezier(0.42, 0, 0.58, 1)
Save as Preset
About CSS Cubic Bezier Generator
What is cubic-bezier()?
The cubic-bezier(x1, y1, x2, y2) CSS function defines a custom easing
curve for transitions and animations. It takes four numbers that describe the positions
of two control points on a graph - the curve they form tells the browser how quickly
or slowly a value should change at each moment during the animation.
The horizontal axis represents time (from 0 to 1, start to finish), and the vertical axis represents progress - how far along the animated value has travelled. A steep curve means rapid change; a shallow curve means slow change.
The Four Parameters
x1 and x2 control where on the time axis the two handles
sit. These must be between 0 and 1 - the CSS specification requires it,
otherwise the timing function becomes undefined.
y1 and y2 control the progress axis and are unrestricted.
Values outside 0–1 create overshoot effects - the animated value briefly
exceeds its target before settling back, producing the bouncy, springy feel of curves
like easeOutBack or easeInOutBack.
Built-in CSS Keywords
CSS provides five shorthand keywords, each of which maps to a fixed cubic-bezier curve.
linear is cubic-bezier(0, 0, 1, 1) - constant speed throughout.
ease is cubic-bezier(0.25, 0.1, 0.25, 1) - the browser default,
which starts quickly and decelerates gently. ease-in starts slow and
accelerates, ease-out starts fast and decelerates, and ease-in-out
does both - slow at the start and end with a faster middle.
When to Use Custom Curves
The built-in keywords cover many common cases, but custom curves unlock far more expressive motion. UI elements that enter the screen often feel best with a strong ease-out character - they arrive quickly and settle softly. Dismissing or hiding elements suits ease-in - a gentle start that accelerates into disappearance. Interactive feedback like button presses or toggles often benefit from a slight overshoot, giving a tactile, springy quality.
For interfaces that need to feel premium or considered, taking the time to tune your easing curves is one of the most impactful details you can invest in.
Pro tip: The same cubic-bezier() function works in
transition-timing-function, animation-timing-function, and
the CSS @keyframes rule. You can also use it in JavaScript animation
libraries like GSAP, Framer Motion, and Motion One - just pass the four values directly.
Shareable links from this tool include the curve values in the URL, making it easy to
hand off exact easing specifications to teammates or clients.
Frequently Asked Questions
What is the cubic-bezier() function in CSS?
cubic-bezier(x1, y1, x2, y2) is a CSS timing function that defines a custom easing curve for transitions and animations.
The four parameters describe the positions of two control points on a graph - the curve they form tells the browser how quickly or slowly a value changes at each moment during the animation.
The horizontal axis represents time (0 to 1), and the vertical axis represents how far along the animated value has travelled.
What do the four cubic-bezier parameters mean?
The function takes four values: cubic-bezier(x1, y1, x2, y2).
x1 and x2 control where on the time axis the two control handles sit - these must be between 0 and 1 as required by the CSS specification.
y1 and y2 control the progress axis and are unrestricted - values outside 0–1 create overshoot effects where the animated value briefly exceeds its target before settling back, producing the bouncy, springy feel of curves like easeOutBack.
What is the difference between ease, ease-in, ease-out, and ease-in-out?
These are built-in CSS keywords that each map to a fixed cubic-bezier() curve.
ease is cubic-bezier(0.25, 0.1, 0.25, 1) - the browser default, starting quickly and decelerating gently.
ease-in starts slow and accelerates into the end.
ease-out starts fast and decelerates to a gentle stop.
ease-in-out does both - slow at the start and end with a faster middle section.
linear is cubic-bezier(0, 0, 1, 1) - constant speed throughout with no acceleration or deceleration.
When should I use a custom cubic-bezier instead of a keyword?
The built-in keywords cover many common cases, but custom curves unlock far more expressive motion.
UI elements entering the screen often feel best with a strong ease-out character - arriving quickly and settling softly.
Dismissing or hiding elements suits ease-in - a gentle start that accelerates into disappearance.
Interactive feedback like button presses or toggles often benefits from a slight overshoot, giving a tactile, springy quality.
Any time the default curves feel generic or slightly off, a custom cubic-bezier() lets you tune the exact feel you are after.
What causes a cubic-bezier curve to overshoot?
Overshoot happens when the y1 or y2 values are set outside the 0–1 range.
A y value greater than 1 causes the animated property to briefly exceed its end value before settling back - for example an element moving 100px might briefly move to 110px before returning to 100px.
A negative y value causes undershoot in the opposite direction.
This is intentional and perfectly valid CSS - it is how springy, elastic, and back-easing curves are created.
The x values, by contrast, must always stay between 0 and 1.
Where can I use the cubic-bezier() function in CSS?
cubic-bezier() can be used as the value for transition-timing-function, animation-timing-function, and directly inside @keyframes rules to control easing between individual keyframe steps.
It also works in JavaScript animation libraries such as GSAP, Framer Motion, and Motion One - you can usually pass the four values directly to their easing parameters.
Any property that accepts a timing function will accept a custom cubic-bezier() value.
What is the difference between cubic-bezier() and linear() in CSS?
The cubic-bezier() function defines a smooth S-shaped easing curve using just two control points, which covers the vast majority of animation needs.
The newer linear() function (introduced in 2023) lets you define a piecewise linear timing function with multiple points, making it possible to describe complex multi-stage easing, spring physics, and bounce effects that a single cubic bezier curve cannot represent.
For most transitions and simple animations, cubic-bezier() is the right tool. For complex physics-based motion, linear() with many stops gives more control.
How do I create a bounce or elastic easing with cubic-bezier()?
True multi-bounce effects cannot be achieved with a single cubic-bezier() because the curve can only overshoot once in each direction.
You can create a single subtle bounce by pushing y2 above 1 - for example cubic-bezier(0.34, 1.56, 0.64, 1) produces a gentle spring-like overshoot on arrival.
For more pronounced multi-bounce effects you would need either the CSS linear() function, a JavaScript animation library, or a CSS @keyframes animation that manually defines each bounce step.
Does cubic-bezier() affect which properties are animated, or just the speed?
cubic-bezier() only controls the timing - that is, the rate of change over the duration of the animation. It has no effect on which properties are animated, what their start or end values are, or how long the animation runs.
Duration is set separately via transition-duration or animation-duration.
The easing curve and the duration are independent: you can apply the same curve to a 0.2s micro-interaction and a 2s page transition and the shape of the motion will be proportionally identical.