CSS Cubic-Bezier Generator

This tool lets you shape a custom CSS cubic-bezier() easing curve with four sliders and preview it live before copying the code. Adjust the x1, y1, x2 and y2 control-point values, watch the curve and a moving preview element update instantly, then copy transition-timing-function: cubic-bezier(...) straight into your stylesheet.

What Is This Tool?

cubic-bezier() is a CSS timing function that controls how an animated or transitioned value accelerates and decelerates over time, instead of moving at a constant rate. It's defined by two control points — (x1, y1) and (x2, y2) — that bend a curve between a fixed start point (0,0) and end point (1,1). The x values must stay between 0 and 1, but y values can go outside that range to create overshoot or bounce effects.

Written by hand, tuning four decimal numbers to get a feel that's neither too abrupt nor too mushy takes a lot of trial and error. This tool replaces that guesswork with direct manipulation: drag a slider, watch the curve bend and the preview ball move accordingly, and copy the CSS once the motion feels right.

Source: CSS Easing Functions Level 1, W3C — the specification defining cubic-bezier() and the five named keywords this tool's presets are based on.

Why Use It?

Live SVG graph shows exactly how your curve bends between the fixed start and end points, with both control points and their handles drawn for clarity.
Play button animates a preview element across a track using your exact curve, so you can feel the motion, not just see a static graph.
One-click presets for the five standard named easing functions — ease, ease-in, ease-out, ease-in-out and linear — as documented in the CSS Easing Functions specification.
Y-values can go below 0 or above 1, letting you build overshoot/bounce-style easings that the named keywords can't produce.
Outputs ready-to-paste transition-timing-function CSS — the same value also works for animation-timing-function.
Runs entirely in your browser — nothing you configure is uploaded anywhere. Free, no signup.

How to Use

Drag the x1/y1 sliders to set the first control point, which shapes how the animation starts.
Drag the x2/y2 sliders to set the second control point, which shapes how the animation ends.
Watch the black curve on the graph — a curve that bulges above the diagonal early on means the motion starts fast, one that stays below it means the motion starts slow.
Click Play to see a preview element move across the track using your curve as its transition-timing-function.
Try a preset (ease, ease-in, ease-out, ease-in-out, linear) as a starting point, then nudge the sliders from there.
Copy the generated CSS and paste it into a transition or animation rule.

Example

Input

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Output

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

This is the standard CSS ease keyword written out as explicit control points — a quick start, sharp acceleration, then a gradual slowdown toward the end.

Why y-values can exceed 0–1

Unlike the x-axis, which represents time and must run from 0 to 1, the y-axis represents the animated value's progress and has no such limit. Setting y1 below 0 or y2 above 1 makes the curve dip past the start value or shoot past the end value before settling — the basis of overshoot and anticipation effects used in button presses, modal pop-ins and playful UI micro-interactions. None of the five named keywords (ease, ease-in, ease-out, ease-in-out, linear) can produce this; you need a custom cubic-bezier() for it.

transition-timing-function vs. animation-timing-function

The cubic-bezier() value this tool generates works identically in both properties. Use transition-timing-function when the motion is triggered by a state change (like a hover or a class toggle), and animation-timing-function inside an @keyframes-driven animation rule when you need the same easing feel applied automatically or in a loop.

Common easing patterns

Snappy UI feedback (buttons, toggles): keep control points close to the diagonal with a slight ease-out bias, e.g. cubic-bezier(0.4, 0, 0.2, 1).
Material Design's standard curve: cubic-bezier(0.4, 0, 0.2, 1) — fast start, gentle finish, widely used for panel and card transitions.
Bounce/overshoot: push y2 above 1, e.g. cubic-bezier(0.34, 1.56, 0.64, 1), for a playful pop-in feel.
Anticipation before movement: push y1 below 0 so the element pulls back slightly before moving forward.
Smooth ease-in-out for looping animations: keep the curve close to symmetric around the center.

Pairing with other CSS tools

An easing curve rarely stands alone — it's usually applied to an element that also needs shadows, rounded corners, or gradients defined. Generate the visual styling with the other CSS tools below, then add the timing function from this tool to the same rule or a transition/animation declaration.

→ Box Shadow Generator · Border Radius Generator

Frequently Asked Questions

What do the four numbers in cubic-bezier() actually mean?

They're the coordinates of two control points, (x1, y1) and (x2, y2), that bend a Bézier curve running from a fixed start point at (0,0) to a fixed end point at (1,1). The x-axis represents elapsed time (0 to 1) and the y-axis represents how far the animated property has progressed, which is why x1 and x2 must stay within 0–1 while y1 and y2 can go outside that range.

What's the difference between ease, ease-in, ease-out and ease-in-out?

ease (the CSS default) starts quickly, then eases out gently. ease-in starts slowly and accelerates toward the end, useful for elements leaving the screen. ease-out starts fast and decelerates, useful for elements entering the screen. ease-in-out is slow at both ends and faster in the middle, giving a smooth, symmetric feel.

Can I use the same cubic-bezier() value for both transitions and animations?

Yes. transition-timing-function and animation-timing-function accept the exact same cubic-bezier() syntax and produce the same easing curve — the only difference is which CSS feature (a transition vs. a keyframes animation) that timing function is attached to.

Why does my curve look broken when y1 or y2 is very large or negative?

That's expected — pushing y-values far outside 0–1 creates strong overshoot, where the animated value swings well past its target before settling. It's a valid and often intentional effect, but if it looks unwanted, bring y1 and y2 back closer to the 0–1 range.

Is a custom curve better than just using the named keywords?

Not necessarily — the five keywords (ease, ease-in, ease-out, ease-in-out, linear) cover most everyday needs and are easier to read in code. Reach for a custom cubic-bezier() when you need a specific feel the keywords don't provide, such as a bounce, a sharper snap, or matching a specific design system's motion spec.