Cubic Bezier / Easing Generator

Build a CSS cubic-bezier() timing function, visualise the curve and copy the transition-timing-function CSS

Control points

Presets:

P1 — first control point

P2 — second control point

Easing curve

01

Preview animation

CSS

.element {
  transition: transform 0.6s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

Examples

Spring-like bounce (easeOutBack)

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

The y1 value of 1.56 overshoots the final value before settling, giving a satisfying spring feel to elements entering the screen.

Snappy ease-in-out

transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);

Starts and ends slowly but accelerates sharply through the middle — ideal for UI elements that need to feel precise and intentional.

Details

CSS cubic-bezier() lets you define any easing curve for transitions and animations using two control points: P1 (x1, y1) and P2 (x2, y2). The x values control timing (must be 0–1), while y values can exceed that range to create overshoot effects. Everything runs entirely in your browser — no data ever leaves your machine.

Examples

Build the default `ease` curve

Input
P1: (0.25, 0.1)
P2: (0.25, 1)
Output
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

The four default values are exactly the W3C `ease` keyword. The buildCss helper runs each coordinate through `parseFloat(n.toFixed(2))`, so a slider value of 0.1 becomes `0.1` (not `0.10`) in the output.

Compose the `ease-out` curve

Input
P1: (0, 0)
P2: (0.58, 1)
Output
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

The starting anchor is (0, 0) and the ending anchor is (1, 1) — the four numbers you control are only P1 and P2. `ease-out` puts P1 at the origin and P2 partway along the bottom-right, producing a curve that decelerates.

Build a spring-like `easeOutBack` with overshoot

Input
P1: (0.34, 1.56)
P2: (0.64, 1)
Output
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

y1 = 1.56 puts the first control point *above* 1.0 — the curve overshoots the end value before settling back, which is exactly the spring effect of the popular easeOutBack easing. The full CSS block rendered by the tool wraps this in `.element { transition: transform 0.6s; … }`.

About this tool

The cubic-bezier() CSS function defines a timing curve for transitions and animations using four numbers: x1, y1 (control point P1) and x2, y2 (control point P2). The start anchor is always (0, 0) and the end anchor is always (1, 1).

x values must stay in the range 0–1 (they represent time), while y values can go below 0 or above 1 to produce undershoot and overshoot effects — the secret behind spring and bounce easings like easeOutBack.

This generator renders the Bézier curve live in SVG, ships a set of common presets, lets you preview the animation on a real element before copying, and outputs a ready-to-paste CSS rule — all running locally in your browser with no server round-trips.

How to use

  1. Choose a preset and customise it

    Click a preset chip (ease, ease-in-out, easeOutBack, etc.) or move the P1 and P2 sliders — the SVG curve preview updates instantly.

  2. Preview the animation

    Click Play animation to watch a sample element animate with your chosen easing so you can feel it before using it in production.

  3. Copy and use the CSS

    Click Copy CSS to copy the full transition-timing-function rule and paste it directly into your stylesheet.

Use cases

Tuning the feel of a UI transition

Pick a preset (ease, ease-out, easeOutBack) and nudge P1 and P2 until the preview animation matches the energy you want — quick, snappy, bouncy — then paste the rule into your stylesheet.

Matching a motion designer's after-effects curve

Ask the designer for the four control-point numbers, type them into the sliders, and the tool renders the same curve with the canonical CSS `cubic-bezier()` syntax.

Learning the difference between ease, ease-in and ease-out

Click the four `ease*` presets in turn and watch the curve change shape — the X axis is time, the Y axis is progress, and the steepness of the middle section is what your eye reads as 'snappy' or 'sluggish'.

Documenting a custom timing function for the design system

Generate the CSS rule, copy it into the design-system tokens file, and link the preview from the design-system docs so engineers can see the curve animate before they use it.

Common CSS easing presets

Preset namecubic-bezier() value
ease (default)cubic-bezier(0.25, 0.1, 0.25, 1)
ease-incubic-bezier(0.42, 0, 1, 1)
ease-outcubic-bezier(0, 0, 0.58, 1)
ease-in-outcubic-bezier(0.42, 0, 0.58, 1)
easeOutBackcubic-bezier(0.34, 1.56, 0.64, 1)

Common mistakes

Mistake:Trying to control P0 and P3 with the sliders.

Fix:P0 is always (0, 0) and P3 is always (1, 1) — they are the start and end anchors of the animation. Only P1 and P2 are user-controlled, and you set each via two sliders (x, y).

Mistake:Setting y outside the -0.5 – 1.5 range and wondering why the preview looks wrong.

Fix:y values outside the unit square (0..1) are what produce undershoot and overshoot effects like easeOutBack. The sliders intentionally let you go to -0.5 and 1.5 so you can build springy easings — but values outside that range are not rendered correctly by CSS.

Mistake:Using `cubic-bezier()` with all four numbers equal to 0.5 and expecting a smooth curve.

Fix:A `cubic-bezier(0.5, 0.5, 0.5, 0.5)` curve is mathematically valid but feels flat — there is no acceleration, just a constant slope. Reach for `ease-in-out` (0.42, 0, 0.58, 1) as a more useful default.

Mistake:Forgetting to wrap the function call in `transition-timing-function:` before pasting.

Fix:The Copy button always emits the full `transition-timing-function: cubic-bezier(...);` declaration. If you paste it directly into a `transition` shorthand, drop the property name and comma-separate the four numbers.

Frequently asked questions

References & standards

Related tools

Aspect Ratio Calculator

Calculate dimensions and ratios for images and videos.

Barcode Generator

Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.

Base64 Image Encoder

Open the Image workspace in Base64 Toolbox to resize and convert images to Base64 data URIs, then copy HTML, CSS, Markdown or JavaScript snippets.

Border Radius Generator

Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.

CSS Grid Generator

Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.

EXIF Viewer & Cleaner

View and remove EXIF metadata from images. See camera info, GPS location, and dates — then download a clean copy.