CSS Easing Visualizer

cubic-bezier editor

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

Drag the Bézier control points and watch the animation update in real time. Library of 30+ presets, side-by-side comparison and CSS output for transition-timing-function.

P1 (x1, y1)
P2 (x2, y2)
curve
Animated preview
Duration (ms) 0.8s
Quick presets

Easing curves define the rhythm of a CSS animation: the difference between an interface that feels mechanical and one that feels fluid and natural almost always comes down to the timing function. Understanding the difference between ease-in, ease-out, ease-in-out and a custom cubic-bezier is essential for every front-end developer.

This visualiser lets you:

  • Draw custom cubic-bezier curves by dragging control points
  • Watch the resulting animation applied to a sample element in real time
  • Compare multiple curves side by side to choose the optimal timing
  • Browse a library of 30+ categorised presets (ease, bounce, elastic, back, expo)
  • Copy the cubic-bezier() value for CSS transitions and @keyframes animations
  • View the steps() equivalent for frame-by-frame animations

How to read a cubic-bezier curve

  • x1 and x2 must be between 0 and 1 for a valid time progression.
  • y1 and y2 can go beyond 0-1 to create overshoot or stronger acceleration effects.
  • Compare presets to find the right motion feel for each UI component.

Use this visualizer for micro-interactions, hover effects, panel openings, and state transitions while keeping motion design consistent.