How do I create a custom cubic-bezier easing curve for CSS?

Drag the two control point handles on the graph, type exact x1, y1, x2, y2 values, or pick a preset. Then choose CSS under Output format and click Copy to get the cubic-bezier() value for transition-timing-function.

How do I make a bounce or overshoot effect with cubic-bezier?

Drag a handle above or below the box so its Y value goes past 0-1. Y can exceed that range, while X stays between 0 and 1. The back-out and anticipate presets are ready-made overshoot starting points.

Can I get the easing for Tailwind, Framer Motion or anime.js?

Yes. The output format tabs are CSS, Tailwind, Framer Motion and anime.js. They all format the same four numbers, so pick a tab and click Copy to put the snippet on your clipboard.

How do I load an existing cubic-bezier value to edit it?

Paste a value such as cubic-bezier(.17, .67, .83, .67) into the import box and click Load. If four numbers cannot be read, you get an error message. The curve is also stored in the page URL after the hash, so it can be shared.

Why does the preview feel slower than my real transitions?

The Motion preview uses a Duration setting you can change, and defaults are slower so you can study the curve. Shorten the Duration, then use Replay to see the motion at the speed you plan to ship.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

📈

Free CSS Cubic-Bezier Easing Generator

Design CSS easing curves by dragging control points, preview the motion live, and copy the cubic-bezier() value. Includes overshoot/bounce presets.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Drag the teal & rose handles to shape the curve

Control points

x1y1x2y2

Motion preview

Duration1.6s

Width transition

CSS value

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Presets

The rose and teal handles can pull above or below the box (Y beyond 0-1) to create 'overshoot' / bounce effects like back-out and anticipate. X stays within 0-1 (time can't reverse).

Common uses

Custom CSS Transition EasingDesign natural-feeling easing for hover effects, menus, and UI transitions.
Bounce & Overshoot AnimationsCreate playful spring/bounce motion by pulling control points past the box.
Easing for @keyframes AnimationsPick the right animation-timing-function for CSS keyframe animations.
Easing Values for JS Animation LibrariesGet cubic-bezier values for GSAP, Framer Motion, anime.js, and more.
Understand How Easing WorksSee the relationship between a bezier curve and the motion it produces.

How It Works

The editor is built entirely in the browser using React state and SVG — no library handles the curve math. Two draggable control points define an SVG cubic Bezier path, and the browser's own CSS animation engine runs the motion preview by injecting the resulting cubic-bezier() value directly into a @keyframes rule.

1
Drag or type control points
Two handles (P1 in teal, P2 in rose) sit on an SVG canvas. Dragging uses the Pointer Events API with setPointerCapture so the handle tracks your finger or cursor even outside the SVG boundary. You can also nudge handles with arrow keys or type exact values into the x1/y1/x2/y2 number inputs.
2
SVG draws the curve in real time
The curve is a single SVG <path> element whose C (cubic Bezier) command is recalculated from the four control-point coordinates on every state update. No canvas, no external library — the browser's SVG renderer draws the path directly.
3
Browser CSS engine previews the easing
Three live animations (a sliding dot, a width transition, and a scale) run CSS @keyframes with the cubic-bezier() value injected inline. The browser's own animation engine interprets the curve, so what you see is exactly what your production CSS will produce.
4
Copy the snippet in your framework's syntax
Tabs format the same four numbers as a CSS transition-timing-function, a Tailwind arbitrary-value class, a Framer Motion ease array, or an anime.js easing string. The snippet is written to the clipboard with navigator.clipboard. The curve is also encoded in the URL hash (#b=x1,y1,x2,y2) so you can share or bookmark it.