CSS Easing & Cubic-Bezier Visualizer

Drag the two control points on the curve, pick a preset, or paste a CSS easing string. The animated dot drives a live preview at a configurable duration, and the panel below is ready to copy into a transition or animation rule. Pure client-side, offline.

t (time) progress
s

Presets

Live preview

The dot tracks the easing curve in real time. Hit Play preview to reset the box at the start of the rail and watch it glide to the end using your curve. The slider below lets you scrub manually.

●
t = 0.000 · y = 0.000

Copy-ready CSS

transition-timing-function 
 
 
 
 animation-timing-function  
 
 
 
 
  
 
 Reference — cubic-bezier() in one paragraph 
 

A cubic-bezier(x1, y1, x2, y2) easing in CSS describes a
          cubic curve from (0, 0) to (1, 1) with two
          control points (x1, y1) and (x2, y2). The
 x  coordinates must stay inside [0, 1] so that
          the curve is monotonic in time (it can't go backwards). The
 y  coordinates can overshoot — they describe the eased
          output and may travel below 0 or above 1, which is how the
back family of easings produces its characteristic
          pull-back and overshoot.

 

The browser solves the curve as a parametric cubic in
(x(t), y(t)) and finds the t where
x(t) matches the current animation progress. We do the
          same on this page using Newton-Raphson with a bisection safety net,
          so you can preview exactly what the browser will draw.