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

cubic-bezier(x1, y1, x2, y2) gives the coordinates of two control points on a curve whose endpoints are fixed at (0,0) and (1,1). The first pair (x1, y1) pulls the start of the curve, the second pair (x2, y2) pulls the end. For example cubic-bezier(0.25, 0.1, 0.25, 1) is the built-in ease: it leaves the start gently and rushes toward the finish. Change the pairs and you reshape how the animation accelerates.

Why is x limited to 0 and 1 but y is not?

The x axis represents elapsed time, and time can only move forward, so each control point x must sit in the 0 to 1 range or the curve would fold back on itself and the easing would be undefined. The y axis is the animated value, which is free to undershoot below 0 or overshoot past 1. That is exactly how a bounce works: cubic-bezier(0.68, -0.55, 0.27, 1.55) dips under 0 then shoots over 1 before settling.

Which curve does the CSS keyword ease equal?

The ease keyword equals cubic-bezier(0.25, 0.1, 0.25, 1). The other keywords map too: linear is cubic-bezier(0, 0, 1, 1), ease-in is cubic-bezier(0.42, 0, 1, 1), ease-out is cubic-bezier(0, 0, 0.58, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1). Load any of them as a preset here, then tweak the handles to get a curve the keywords cannot express.

How do I make a springy bounce effect?

Push a y value past 1 or below 0 so the curve overshoots its target before settling. A common back-ease is cubic-bezier(0.68, -0.55, 0.27, 1.55): the start dips slightly backward, then the end sails above 1 and eases down. Drag the cyan handle above the top of the box in this tool and watch the motion preview overshoot and snap back. Keep both x values in 0 to 1 so time still flows forward.

How do I use the output in CSS?

Copy the line and drop it into a rule, for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); or set transition-timing-function on its own. The same value works in animation-timing-function for @keyframes. You can also reuse it across properties so a card lift and a fade share one feel. The tool emits the full transition-timing-function declaration so you can paste it straight in.

Lock an overshoot badge across the team

A notification badge should pop with a slight overshoot, but ease-out feels dead. Pull the second handle's y above 1 so the curve sails past the target and settles, run the motion preview at 0.3s to tune how far the dot bounces, then copy cubic-bezier(0.68,-0.55,0.27,1.55) into your keyframes animation-timing-function so every build pops identically.

Read the eased value at the midpoint to debug a jump

A transition feels like it lurches halfway through. Load the shipped curve via a preset or the four numbers, then use the solver to read y at progress 0.5. If it reads 0.85 when you expected about 0.5, the curve front-loads the motion. Drag the handles until the midpoint reads where you want and copy the corrected line.

CSS Cubic Bezier Generator for Easing Curves

Drag two handles, read the cubic-bezier() — five built-in presets, motion preview, solve y for any progress, browser-only

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Presets

Control points

Control point 1

x 0.25

y 0.1

Control point 2

x 0.25

y 1

x stays between 0 and 1 — time can only move forward

y can go past 0–1 for overshoot and bounce

Curve

CSS output

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

Motion preview

Duration1.0s

Solve y for a given progress

Progress (x)

0.5

Eased value (y)

0.802

Enter progress t from 0 to 1, read the eased output value

What this tool does

A visual cubic-bezier easing curve generator for CSS transitions and animations. A cubic-bezier() timing function is defined by four numbers, cubic-bezier(x1, y1, x2, y2): the two middle control points of a curve that always starts at (0,0) and ends at (1,1). The x axis is the progress of time and stays between 0 and 1; the y axis is the eased output and may go below 0 or above 1 to create anticipation, overshoot and bounce. Drag the two handles on the SVG curve, or nudge each value with a slider, and the tool writes the transition-timing-function line for you. Load ease, linear, ease-in, ease-out or ease-in-out with one click to start from a known curve, then run the motion preview to watch a dot travel along your easing at the duration you set. Need a single frame value? The solver reverses x into y so you can read the eased output at any progress. Everything runs in your browser, one-click copy, and a shareable URL that reproduces the exact curve. 100% client-side, nothing is uploaded.

Tool details

Input: Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 11 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Cubic Bezier Generator fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Lock an overshoot badge across the team
A notification badge should pop with a slight overshoot, but ease-out feels dead. Pull the second handle's y above 1 so the curve sails past the target and settles, run the motion preview at 0.3s to tune how far the dot bounces, then copy cubic-bezier(0.68,-0.55,0.27,1.55) into your keyframes animation-timing-function so every build pops identically.
Read the eased value at the midpoint to debug a jump
A transition feels like it lurches halfway through. Load the shipped curve via a preset or the four numbers, then use the solver to read y at progress 0.5. If it reads 0.85 when you expected about 0.5, the curve front-loads the motion. Drag the handles until the midpoint reads where you want and copy the corrected line.

Common pitfalls

Typing an x outside 0 to 1. Time only moves forward, so x1 and x2 must stay in 0 to 1; a value like 1.4 folds the curve back and makes the easing invalid. Only y is free to dip below 0 or rise above 1.
Treating the handle's y position as the value at that time. The curve maps time x to output y, so use the solver to read y at a given progress instead of eyeballing where the handle sits.
Copying the curve but forgetting a duration. A timing function only shapes how motion runs; with no transition or animation duration there is nothing for the curve to bend and the easing shows no effect.

Privacy

The curve math, the y solver, the motion preview and the copy button all run as plain JavaScript inside your browser tab. No curve, value or setting is sent to a server and nothing is logged. The one thing to note: the shareable URL encodes the four parameters in the query string, so a link you paste into chat records those numbers in the recipient server's access log. They are only easing coordinates, so there is nothing sensitive to leak.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Cubic Bezier Generator for Easing Curves

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Cubic Bezier Generator fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Lock an overshoot badge across the team

Read the eased value at the midpoint to debug a jump

Common pitfalls

Privacy

FAQ

CSS Box Shadow Generator

CSS Formatter & Minifier

CSS Line Clamp Generator

CSS Grid Generator

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

App Store Keywords Checklist

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet