HandyTools Hub

Cubic Bezier Generator

Design CSS timing functions visually and copy the cubic-bezier value

Drag the two control points to shape the curve. Horizontal stays within the box; vertical can overshoot for bounce effects.

Your curve

Linear (reference)

 
 
 
  
How to Use


    

  1. Drag the control points — Grab either circular handle on the curve editor and move it. Horizontal movement is clamped to the unit box; vertical movement can overshoot above or below it for bounce effects.
    2. 

  2. Start from a preset — Click any preset (ease, ease-in-out, easeOutBack, and more) to load its control points, then fine-tune by dragging.
    3. 

  3. Watch the curve — The blue curve is the timing function itself; the dashed diagonal shows linear for reference.
    4. 

  4. Play the preview — Hit “Play Preview” to animate a dot with a real CSS transition driven by your exact cubic-bezier value, next to a linear reference dot.
    5. 

  5. Copy the CSS — The output updates live as cubic-bezier(x1, y1, x2, y2); click copy and paste it into your stylesheet.
    6. 



Features


    

  • Draggable curve editor — Two control points with unified mouse and touch support (Pointer Events), drawn on a live canvas with grid and linear reference.
    • 

  • Overshoot support — Control-point y is allowed outside [0,1], so back/anticipation easings like easeOutBack are fully expressible; x stays clamped to [0,1] as the CSS spec requires.
    • 

  • 22 built-in presets — The CSS keyword easings (ease, ease-in, ease-out, ease-in-out, linear) plus classic named easings: Quad, Cubic, Quart, Sine, Expo, Circ, and Back families.
    • 

  • Honest preview — The dot is animated by a genuine CSS transition using your generated value, so what you see is exactly what the browser will do.
    • 

  • Live CSS output — The cubic-bezier(...) value updates on every drag and copies to the clipboard in one click.
    • 

  • 100% client-side — Everything runs in your browser; no data ever leaves your device.
    • 



Use Cases


    

  • Micro-interactions: Tune a snappy ease-out for buttons and toggles and verify the feel with the live dot before shipping.
    • 

  • Bounce effects: Drag the second control point above the box to design overshoot for modals, toasts, and playful UI.
    • 

  • Matching design specs: Recreate named easings from design systems (Material, easeOutBack-style motion) and copy the exact value.
    • 

  • Learning timing functions: Start from a preset, move one control point at a time, and watch how the curve and the animation change together.
    • 




Frequently Asked Questions
What do the four numbers in cubic-bezier(x1, y1, x2, y2) mean?
They are the coordinates of the two control points of a cubic bezier curve anchored at (0,0) and (1,1): x1, y1 is the first control point and x2, y2 the second. The x axis represents time progress and the y axis the animation's output progress, so the curve's shape describes how the animation speeds up and slows down.
Why can y go above 1 or below 0 while x cannot?
The x coordinates of the control points must stay within [0,1] because time cannot run backwards — the curve must remain a function of progress. The y coordinates are free: values above 1 make the animation overshoot its target before settling (easeOutBack), and values below 0 pull it backwards first (easeInBack). This is exactly how bounce and anticipation effects are built.
Where can I use the generated cubic-bezier value?
Anywhere CSS accepts a timing function: transition-timing-function, animation-timing-function, or the shorthand transition and animation properties. Paste it as-is, e.g. transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);