Easing Playground - Free CSS cubic-bezier editor & preview tool

1Presets & Timing

sec
sec

Click to apply, then fine-tune it in the editor.

2Cubic-Bezier / linear() Editor

  • cubic-bezier: Drag the two handles. Fine-tune the selected handle with the arrow keys (Shift for bigger steps). x ranges 0–1; y may go outside (roughly -1 to 2).
  • linear(): Click inside the editor to add a point / drag to move / double-click or Alt+click to delete (endpoints cannot be removed).
  • You can also type cubic-bezier(…), linear(…), steps(…) or a keyword such as ease into the field.

3Preview

or press Space

The bar uses CSS Transition, the box uses Transform + Transition. Duration/Delay/Easing are shared.

4Code

CSS
GSAP (CustomEase)
Current timing-function
cubic-bezier(0.25, 0.1, 0.25, 1)

How to use

  1. Pick a presetChoose a motion close to what you want under “Presets”. Enter Duration (how long it moves) and Delay (how long it waits before starting) in seconds.
  2. Shape the curveDrag the two handles in the editor to build a cubic-bezier. For linear(), click to add points and drag to move them. You can also type a value into the field and press “Apply”.
  3. Check the previewThe bar and the box move when you pick a preset or release a handle. Press “Play” to watch it again.
  4. Copy the codeCopy the CSS or GSAP (CustomEase) code and paste it into your page. Open the “Share URL” link to bring back the same settings.

Shortcuts