ZeroTool Workbench
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. 100% browser-based.
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’s standard curve
(0.4, 0, 0.2, 1), iOS’s natural ease, or Tailwind’sease-in-outdefault. - 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 bulges below the diagonal accelerates first then decelerates (ease-in-out feel). A curve that bulges above accelerates fast then slows (ease-out feel). 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 standard) | Symmetric, neutral feel — 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. |
Privacy
The editor runs entirely 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.