CSS Cubic Bezier Generator

Design a custom easing curve visually and copy the exact cubic-bezier() CSS.

FreeBrowser-basedInstant
Presets
Live preview

Your files are processed locally in your browser and are not uploaded to our servers. All generation happens instantly in your browser using plain JavaScript — nothing is sent to a server.

How to use CSS Cubic Bezier Generator

Drag the two control points on the curve graph and a looping preview element animates using that exact easing in real time, so you can see and feel the timing before copying it. Pick from common presets (ease, ease-in-out, and more) as a starting point, or build a fully custom curve from scratch. Everything runs locally in your browser.

Key features

  • Drag-to-edit visual curve editor with two control points
  • Live looping animated preview using the exact curve
  • Built-in presets matching the standard easing keywords
  • One-click copy of the exact cubic-bezier() value

Practical use cases

  • Fine-tuning a button hover or press animation's feel
  • Creating a custom bounce or overshoot easing for a modal entrance
  • Matching an easing curve to a specific design system's motion spec
  • Comparing a custom curve against the standard ease-in-out visually

Supported formats

Accepted: css-cubic-bezier

Limitations

  • Y-axis overshoot is supported per spec but very extreme values can look unnatural
  • Does not export a full @keyframes animation, only the timing-function value

Frequently asked questions

What is a cubic-bezier() value used for?
It defines the easing curve of a CSS transition or animation - how fast or slow it moves at different points, instead of the flat constant speed of `linear`. It's a drop-in value for the `transition-timing-function` or `animation-timing-function` property.
How do I use the curve I create?
Drag the two control point handles until the animated preview feels right, then copy the generated `cubic-bezier(x1, y1, x2, y2)` value and paste it into your `transition` or `animation` CSS declaration.
Are there preset curves to start from?
Yes - built-in presets matching the standard `ease`, `ease-in`, `ease-out`, and `ease-in-out` keywords, which you can then drag and fine-tune from.
Can control points go outside the 0-1 range on the x-axis?
No - per the CSS spec, a valid cubic-bezier() requires both x coordinates to stay between 0 and 1 (y can go outside that range for an overshoot/bounce effect); the tool clamps dragging accordingly.

Part of CSS Tools