---
title: "Cubic Bezier Generator"
description: "Drag two control points to shape a CSS easing curve, watch it replay, and copy the cubic-bezier() value. Overshoot curves are supported."
url: https://findutils.com/design/cubic-bezier-generator/
category: design
---

# Cubic Bezier Generator

Drag two control points to shape a CSS easing curve, watch it replay, and copy the cubic-bezier() value. Overshoot curves are supported.

**Use this tool:** [Cubic Bezier Generator](https://findutils.com/design/cubic-bezier-generator/)

## Programmatic access

- Browser-only: this tool works on a file, the DOM, or a browser API and has no REST or MCP id.

## Why use a cubic bezier editor?

CSS gives you four keywords - ease, linear, ease-in, ease-out, ease-in-out - and then hands you cubic-bezier() with four numbers and no way to picture what they do. Those numbers are the two control points of a curve that maps elapsed time to progress, and typing them blind means reloading until the motion feels right. This page draws the curve, lets you drag the handles, and replays the motion beside it, so you choose the feel and copy the value.

## Frequently Asked Questions

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

They are two control points, written x1, y1, x2, y2. The curve always runs from (0,0) to (1,1); those two points bend it. X is time and must stay between 0 and 1, while Y is progress and may go outside it.

### How do I make a springy, overshooting motion?

Drag the second handle above the top line so its Y value goes past 1. The value overshoots its target and settles back. The Back out preset is a usable starting point.

### Why is my X value clamped?

Because a control point with X outside 0 to 1 would let the curve move backwards in time, which CSS does not allow. Y is deliberately not clamped, since that range is where overshoot lives.

### What is the difference between ease-in and ease-out?

Ease-in starts slowly and accelerates, which suits something leaving the screen. Ease-out starts fast and decelerates, which suits something arriving. Using them the wrong way round is the usual cause of motion that feels sluggish.

### Can I use this for a CSS animation as well as a transition?

Yes. The same value works in animation-timing-function and in the animation shorthand, not just transition-timing-function. Copy the function on its own with the second button.

### Does it work with the steps() timing function?

No. steps() is a different family that jumps rather than curves, so it cannot be represented by two control points. Write it by hand when you want a frame-by-frame effect.

### Is the generated value production ready?

Yes. cubic-bezier() has been supported without a prefix in every current browser for many years, and the output is a plain CSS value.

### Is anything uploaded?

No. The curve exists only in your browser and no request carries it. Third-party analytics and ads load on the page, as on the rest of the site.

## Related Tools

- [CSS Animation Generator](https://findutils.com/design/css-animation-generator/)
- [SVG Animation Generator](https://findutils.com/design/svg-animation-generator/)
- [Box Shadow Generator](https://findutils.com/design/box-shadow-generator/)
- [CSS Border Radius Generator](https://findutils.com/design/border-radius-generator/)
- [Gradient Generator](https://findutils.com/design/gradient-generator/)
- [Lottie Editor](https://findutils.com/design/lottie-editor/)