# Cubic Bezier Generator

Canonical URL: https://offlineutils.com/cubic-bezier-generator
Category: CSS
Published: 2026-07-16
Publisher: offlineutils.com
Runs entirely in the browser; nothing entered into the tool is uploaded.

> A Cubic Bezier Generator lets you design a CSS easing function by dragging the two control points of a cubic-bezier() curve, previewing the motion in real time, and copying the exact transition-timing-function value — all in your browser.

CSS transitions and animations accept a cubic-bezier(x1, y1, x2, y2) timing function that shapes how a value accelerates over time. This generator gives you the curve visually: drag either control point (the y-axis can overshoot past 0 and 1 for 'back' / anticipation effects), replay the motion on a live sample, or start from presets like ease, ease-in-out, and out-back. The copy-ready output drops straight into a transition or animation. Nothing is uploaded.

## Features

- Drag both control points on an interactive curve
- Y-axis overshoot for anticipation / 'back' easings
- Live motion preview with one-click replay
- Presets: linear, ease, ease-in, ease-out, ease-in-out, back
- Copy-ready transition-timing-function output
- Runs entirely in your browser — nothing uploaded

## Use cases

- Designing a custom ease for a button or modal transition
- Matching a motion spec from a designer as a cubic-bezier value
- Creating a springy overshoot feel without a JS animation library
- Fine-tuning the timing of a CSS keyframe animation

## How to use it

1. **Drag the control points** — Move the two handles to shape the easing curve, or pick a preset to start.
2. **Preview the motion** — Watch the sample replay the easing; hit Replay to see it again.
3. **Copy the CSS** — Copy the transition-timing-function value into your stylesheet.

## When to use it, and when to use something else

- **vs cubic-bezier.com** — use Cubic Bezier Generator when you want the curve editor alongside the rest of your CSS tools with no tracking. Use cubic-bezier.com when you want to compare two curves side by side, which that site specializes in.
- **vs Keyword easings (ease, ease-in-out)** — use Cubic Bezier Generator when you need a specific custom feel the keywords can't express. Use Keyword easings (ease, ease-in-out) when a standard keyword already looks right — it's fewer characters.

## Frequently asked questions

### What do the four cubic-bezier numbers mean?

They are the x and y coordinates of the two control points: cubic-bezier(x1, y1, x2, y2). x is progress through time (must be 0 to 1); y is the animated value's progress (it can go below 0 or above 1 to overshoot).

### Can y values go outside 0 and 1?

Yes. y can be negative or greater than 1, which makes the animation overshoot and settle back — the basis of 'back' or anticipation easings. x must stay within 0 to 1 or the curve isn't a valid function of time.

### Where do I paste the output?

Into any CSS transition or animation, e.g. transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); or as the animation-timing-function.

### Does this work offline?

Yes. The editor and preview are pure client-side code — once the page loads it keeps working with no connection, and nothing you design is uploaded.

## Related tools

- https://offlineutils.com/glassmorphism-generator
- https://offlineutils.com/box-shadow-generator
- https://offlineutils.com/css-gradient-generator