Cubic Bezier Editor
Visually design CSS transition timing curves. Drag the control points to craft the perfect easing for your animations.
Presets
Animation Preview
How to use
Drag the blue and purple handles on the curve, or type values directly. Copy and paste into your CSS:
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);About the Cubic Bezier Editor
Easing curves are one of those things that separate animations that feel designed from ones that feel thrown in. But writing cubic-bezier() values by hand is guesswork. This editor lets you drag the handles instead.
How it works
A cubic bezier timing function takes four numbers: x1, y1, x2, y2. The start and end points are fixed at (0, 0) and (1, 1). The two control points — P1 and P2 — are the ones you're actually moving. The x-axis is time, the y-axis is how far through the animated value the element is.
When a control point's y-value goes outside the 0-to-1 range, the curve overshoots. That's where the "back" and "elastic" effects come from. The canvas shows a shaded overshoot zone so those handles stay visible even when they go past the unit square.
Eight presets are built in, from the standard CSS keyword easings to expressive overshoot curves. The live preview plays a box across a track using whatever curve you're working with. Hit Play, watch it move, adjust if it's not right. When it feels good, copy the value and paste it into your CSS.
Using it in CSS
Transition shorthand
transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
Animation timing function
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
Pro Tip
For modals and drawers, ease-out (fast start, slow end) feels most natural to users. Ease-in-out works well for looping animations. And ease-out-back is the one to reach for when you want that satisfying little overshoot on an entrance.