Skip to content
Toolars
Explore
Report bug

Design · Local utility

CSS Cubic Bezier Generator

Shape easing curves with draggable control points, watch a live motion preview at your duration, and copy the cubic-bezier() values.

Task path / input to outcome

Place the first control point

Runs locally · Nothing is uploaded

How CSS Cubic Bezier Generator works, privacy, and related tools

Task path / input to outcome

How to design a cubic-bezier easing curve

  1. 01

    Place the first control point

    Set Control X1 between 0 and 1 and Control Y1 between −1 and 2. The curve chart redraws live, with a guide line running from the start point to your handle.

  2. 02

    Place the second control point

    Set Control X2 (0–1) and Control Y2 (−1 to 2). Pulling a Y value past 1 is what creates the overshoot that makes an ease feel springy; pulling Y1 below 0 adds a moment of anticipation before the motion starts.

  3. 03

    Set the duration

    Choose a Duration from 0.1 to 4 seconds. The marker on the motion track loops across it using your exact curve, so the cadence you watch is the cadence you ship.

  4. 04

    Or start from a known curve

    The default curve — 0.25, 0.1, 0.25, 1 — is exactly the standard ease keyword and a neutral starting point. Press Load sample for a springy overshoot curve (0.34, 1.56, 0.64, 1) that demonstrates what a Y value past 1 does.

  5. 05

    Copy the timing CSS

    Copy CSS or Download .css saves toolars-cubic-bezier.css. The .motion rule sets transition-duration and both transition-timing-function and animation-timing-function. It does not set animation-duration, so add that separately for keyframe animations.

  6. 06

    Read the chart before shipping

    The chart plots progress over time between the fixed start and end points: flat sections are slow, steep sections fast. A curve that dips below the start or rises past the end is not an error — that is anticipation and overshoot, drawn honestly.

Tool facts

Processing
In your browser
Input leaves this device
Never
Retention
Nothing is stored
Price
Free

Your input stays in the browser.

CSS Cubic Bezier Generator uses its verified local execution path and does not create a hidden input or output history.

Local execution

Runs inside the current browser tab.

No hidden processing

Active tool data never becomes a Toolars document record.

No account required

Use the core workflow without creating a profile. Favorites sync to your account after you sign in.

Immediate reset

Clear the tab and the active working data is gone.

What CSS Cubic Bezier Generator actually does

A modal that should snap open but settle gently, a card hover that needs a small overshoot, an onboarding tooltip that must feel unhurried — easing is the difference between an interface that feels finished and one that feels default. Plotting the curve here, against a real animated preview, beats guessing four numbers in a stylesheet, and the experimentation stays in the tab. When the loop feels right, the four values are already correct for production.

Common questions

Why can X only run from 0 to 1 while Y runs from −1 to 2?
The CSS standard keeps both X values inside [0, 1] so time always moves forward along the curve. Y has no such limit — values below 0 or above 1 produce anticipation and overshoot — and this tool bounds Y to −1 to 2, which covers every practical ease.
What exactly is exported?
A .motion class with three declarations: transition-duration set to your seconds, and the same cubic-bezier() value assigned to transition-timing-function and animation-timing-function.
How do I read the preview?
The chart plots the curve between its fixed start and end points with guides to both control handles, and the track below animates a marker at the chosen duration using the real timing function — the honest cadence, not an approximation.
How do I shape an ease-in, ease-out, or spring?
Push the first handle's X toward 1 with a low Y for a slow-start ease-in; bring the second handle's X toward 0 with a high Y for a gentle ease-out. Push either Y past 1 for a spring that overshoots its target, or below 0 for anticipation.
Does the class work for transitions and keyframe animations alike?
Yes — the same cubic-bezier() value is assigned to both timing-function properties, and the duration sits in transition-duration. If you only need one mechanism, delete the other line after pasting; the curve itself is mechanism-agnostic. With keyframes, remember the timing function applies between each pair of frames, not across the whole run.
Is anything uploaded or stored?
No. The curve is computed and previewed locally in this tab, no account is required, and nothing is logged or sent. Press Reset to restore the default ease.

Continue in Design

Related tasks, not a dead end.

Move into another focused workspace without returning to the full index.

CSS Loader Generator

Design an orbit-ring or three-dots loading spinner with size, stroke, speed, and color controls, and copy CSS that respects reduced motion.

Create

CSS Checkbox Generator

Style a custom checkbox with size, border, and state colors, and copy CSS that keeps a real, keyboard-accessible input underneath.

Create

CSS Switch Generator

Design a pure-CSS toggle switch with track, thumb, and two-state colors, and copy code with focus and reduced-motion handling included.

Create

CSS Clip Path Generator

Edit polygon points by dragging, keyboard or coordinates. Start with four presets and copy a clip-path declaration or full CSS, locally.

Create