Cubic-Bezier Editor

Design custom easing curves visually with an interactive bezier editor. Preview animations in real time and export CSS or Tailwind classes.

Easing Library

Curve Editor

P10.40, 0.00

P20.20, 1.00

Preview

X1: 0.40

Y1: 0.00

X2: 0.20

Y2: 1.00

Duration: 500ms

cubic-bezier(0.40, 0.00, 0.20, 1.00)

Show Tailwind

CSS

transition-timing-function: cubic-bezier(0.40, 0.00, 0.20, 1.00);

Tailwind CSS

<div class="transition-all duration-500 ease-[cubic-bezier(0.40,_0.00,_0.20,_1.00)]">
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

Build CSS keyframe animations visually with a timeline editor. Export CSS and Tailwind classes.

Generate animated SVG graphics — spinners, loaders, shapes, waves and more. Customize colors, speed and size, then copy or download.

Generate glassmorphism effects with backdrop-blur, opacity and saturation controls.

Build flexbox layouts visually. Control direction, justify, align, wrap, gap and individual item properties.

Combine 2D and 3D CSS transforms visually — translate, rotate, scale, skew and perspective with live preview and transform-origin control.

Create stunning text effects — gradient text, stroke, neon glow, long shadow, retro 3D and emboss.