Skip to content

Design an easing curve and copy the timing function

Shape an animation easing curve by dragging handles and copy the timing-function CSS.
presets
p1x0.40
p1y0.00
p2x0.20
p2y1.00
cubic-bezier(0.4, 0, 0.2, 1)

About this tool

How to use it

  1. Drag the bezier handles to shape the curve, or pick a preset.
  2. Preview the animation in the live example box.
  3. Copy the timing-function CSS.

Why it lives here

Everything runs in your browser. No account, no ads, no tracking, and no upload.

Tagged with

easingcubic bezierspringtiming designers

related tools

Lorem ipsum Placeholder copy by paragraphs, sentences or words — any length, instantly. Writers Color palette Generate palettes by harmony rule with CSS variables. Designers Color converter Enter a color once and get it in HEX, RGB, and HSL simultaneously. Designers