Dev Tools
Client-sidefiles never upload

cubic-bezier visual editor

Design CSS easing curves by dragging two control points. 11 built-in presets (ease, Material, Tailwind, anticipate, …), live animation preview, and one-click output as CSS / Tailwind v4 / Framer Motion / @keyframes.

Curve (drag the handles)
(0,0)(1,1)
Axis values
Duration
Presets
Animation preview
Output format
css
cubic-bezier(0.25, 0.1, 0.25, 1)
β€ΊHow to use
  1. Drag the two coloured handles on the SVG canvas to shape the curve. The x axis is clamped to 0-1 (per CSS spec); the y axis is unbounded so you can build anticipate / overshoot effects.
  2. On the right, the axis fields let you type precise numbers. The duration toggle (300 / 600 / 1000 ms) controls the preview tempo.
  3. Below, preset chips apply popular ramps in one click (ease, Material, Tailwind defaults).
  4. The preview bar animates with your current curve. The output tab strip switches between CSS / Tailwind v4 / Framer Motion / @keyframes β€” hit Copy in the corner.
Tips
  • State syncs into the URL hash (e.g. #0.25,0.1,0.25,1), so a copied URL shares the exact curve.
  • Want a bounce / overshoot? Push y1 below 0 or y2 above 1. The anticipate preset does exactly that.
  • Tailwind v4 supports ease-[cubic-bezier(...)] arbitrary classes β€” no tailwind.config edit needed.
  • Framer Motion's ease: [...] prop wants the same four numbers in the same order as CSS.

Related tools