CSS Easing Visualizer

Design cubic-bezier easing curves with a draggable editor. Preview animations in real-time and export production-ready CSS.

Bezier Curve

cubic-bezier(0.25, 0.1, 0.25, 1.0)

Presets

Animation Preview

Duration s

Translate

Scale

Rotate

Opacity

Compare

Show comparison

Pin the current curve, then adjust to compare side-by-side.

Code

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);

                            // tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'custom': 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
      }
    }
  }
}
                        

                            $easing-custom: cubic-bezier(0.25, 0.1, 0.25, 1.0);

.element {
  transition: all 0.3s $easing-custom;
}
                        