Cubic Bezier Generator
Visual cubic-bezier() editor for CSS easing curves. Drag the control points, preview the animation live, and copy CSS / SCSS / Tailwind output. Runs in your browser.
- Runs in your browser
- Your data never leaves your browser
- Free · No Sign-Up
Scan with WeChat to share this tool
Examples, details and FAQ Worked examples, how it compares with other tools, and answers to common questions.
When to reach for a custom cubic-bezier
The four built-in CSS keywords (linear, ease, ease-in, ease-out, ease-in-out) cover the everyday cases. You need a custom cubic-bezier when:
- Your design system has a defined motion language — Material Design 2’s standard curve
(0.4, 0, 0.2, 1), Material 3’s(0.2, 0, 0, 1), or Tailwind’sease-in-out. - The animation should overshoot or anticipate — modal pop-ins, drawer drags, button press feedback.
- You want to match a Figma or After Effects timing curve exactly so the prototype and the production build feel the same.
Reading the curve at a glance
The X axis is normalized time (0 at the start, 1 at the end). The Y axis is animation progress. A diagonal line means linear. A curve that sags below the diagonal starts slowly and catches up at the end (ease-in feel). A curve that bulges above starts fast and slows down (ease-out feel). An S-shape, below then above, is ease-in-out. When the curve dips below 0 or above 1, you get the “spring” effect — useful for playful UI but distracting in functional flows.
Common easing playbook
| Use case | Recommended curve | Why |
|---|---|---|
| Page or section enter | cubic-bezier(0, 0, 0.2, 1) (decelerate) | Fast at first, settles softly so the user catches the final state. |
| Page or section exit | cubic-bezier(0.4, 0, 1, 1) (accelerate) | Slow at first, leaves quickly so the next view feels snappy. |
| Generic transition | cubic-bezier(0.4, 0, 0.2, 1) (Material 2 standard) | Speeds up quickly and slows down gently — works for hover, focus, and small movements. |
| Playful pop-in | cubic-bezier(0.68, -0.55, 0.265, 1.55) (back ease) | Anticipation plus overshoot; great for badges, toasts, attention nudges. |
| Drag follow | cubic-bezier(0.25, 0.46, 0.45, 0.94) | Smooth deceleration that feels like physics-driven inertia. |
Where the presets come from
Each preset button loads the four numbers below. The labels name the system and version, because the same name can mean different curves: Material 3 replaced the Material 2 standard curve, and Apple has more than one default.
| Preset | Value | Source |
|---|---|---|
| Ease, Ease-In, Ease-Out, Ease-In-Out | (0.25, 0.1, 0.25, 1), (0.42, 0, 1, 1), (0, 0, 0.58, 1), (0.42, 0, 0.58, 1) | The CSS keywords, CSS Easing Functions Level 1 §2.2 |
| Material 2 Std / Decel / Accel | (0.4, 0, 0.2, 1), (0, 0, 0.2, 1), (0.4, 0, 1, 1) | Material Design 2, Speed |
| Material 3 Std | (0.2, 0, 0, 1) | Material 3 easing tokens (md.sys.motion.easing.standard) |
| Core Animation default | (0.25, 0.1, 0.25, 1) | CAMediaTimingFunctionName.default; the same curve as CSS ease. UIKit view animations default to ease-in-ease-out instead. |
| Tailwind In-Out | (0.4, 0, 0.2, 1) | Tailwind CSS transition-timing-function (ease-in-out) |
| Back (overshoot) | (0.68, -0.55, 0.265, 1.55) | A common overshoot curve; the y values below 0 and above 1 make it pull back and spring past the end. |
The x values of both control points must stay between 0 and 1, because time cannot run backwards; the editor clamps them. The y values may leave that range, which is how the Back preset overshoots.
Privacy
The editor runs in your browser. Curve evaluation, animation preview, and copy actions happen on your device. No control point, duration, or generated CSS is sent to any server.
Related tools
- CSS Clip Path Generator — visual clip-path editor with draggable handles.
- Glassmorphism Generator — frosted-glass surface tokens with live preview.
- CSS Filter Generator — blur, brightness, hue-rotate and friends, slider-driven.
FAQ
What is a cubic-bezier easing function?
A CSS cubic-bezier(x1, y1, x2, y2) describes a curve that maps elapsed time (0 to 1) to animation progress (0 to 1). The curve is anchored at (0, 0) and (1, 1); the two numbers you control are the inner control points P1 and P2. P1.x and P2.x must stay inside [0, 1], while P1.y and P2.y can go above 1 or below 0 to express overshoot and anticipation.
How is this different from the ease, ease-in, ease-out keywords?
CSS keywords are just named cubic-bezier presets. ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in-out is cubic-bezier(0.42, 0, 0.58, 1), and so on. They cover only four shapes. With a custom curve you match your design system standard (Material, iOS, Tailwind), tune the feel of one specific transition, and reuse the exact same numbers across CSS, SCSS, and Tailwind config.
Why can P1.y or P2.y go outside the 0 to 1 range?
Negative or above-one Y values create anticipation (the element pulls back before moving) and overshoot (it overshoots and settles). The classic back-out curve cubic-bezier(0.68, -0.55, 0.265, 1.55) goes both ways. The X axis is still time, so it must stay in [0, 1] for the curve to be a valid CSS timing function.
How do I plug the output into Tailwind CSS?
In tailwind.config.js add an entry under theme.extend.transitionTimingFunction, for example smooth-out: 'cubic-bezier(0.4, 0, 0.2, 1)'. Then the utility class ease-smooth-out becomes available. The Tailwind output mode of this tool prints exactly that snippet for you.
Are my settings stored anywhere?
Control point positions, the preview duration, and the output format are saved to localStorage on your device using ZeroTool's built-in persistence. Nothing is uploaded. The Clear button on this page resets the curve to ease-in-out and removes the local entry.