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.

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: Files + 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.

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

FAQ

CSS Box Shadow Generator

CSS Formatter & Minifier

CSS Line Clamp Generator

CSS Grid Generator

AI Eval Planner

API Key Generator

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet

AWS CLI Cheatsheet

Backup Codes Generator

Barcode Generator