ADVERT
🎚️ Easing Function Visualizer
Design custom cubic-bezier easing curves with drag-and-drop handles, presets, live motion previews, and ready-to-copy CSS.
Interactive cubic-bezier editor
Drag the control points or enter values to sculpt easing curves. Preview the motion and copy the CSS timing function instantly.
Current easing
cubic-bezier(0.250, 0.100, 0.250, 1.000)Curve editor
Presets
Start from popular easing curves
Live motion preview
Continuous animation with the current easing.
Click play to see a one-off transition.
TimelineOutput
10%
9%
25%
41%
50%
80%
75%
96%
90%
99%
CSS output
/* Apply this timing to transitions */
.element {
transition: transform 1.6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
/* Or use it with animations */
@keyframes easing-motion {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.motion-loop {
animation: easing-motion 1.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) infinite alternate;
}How to use this tool
- Pick a preset curve or drag the control points in the graph to sculpt your own easing.
- Set the preview duration to match your transition or animation timing, then play the demos to inspect motion.
- Copy the generated <code>cubic-bezier</code> string or CSS snippet and paste it into your project styles.
Design workflows
- Prototype micro-interactions before handing specs to engineering teams.
- Keep a library of brand motion presets by exporting the CSS block for each curve.
- Compare easing profiles side by side with the timeline samples to pick the right feel.
Motion tuning tips
- Snap the handles toward the diagonal to stay close to linear movement when you only need subtle easing.
- Use values above 1 or below 0 on the Y axis for anticipation and overshoot effects.
- If a curve feels sluggish, reduce the first handle's X value so momentum builds earlier.
FAQ
- What does each control point represent?
- The first handle controls acceleration at the start of the motion, while the second handle shapes how the animation settles toward the end.
- Can I enter exact numbers?
- Yes. Use the numeric inputs beneath the graph to type precise coordinates or to match values from design specs.
- Why do some curves go outside the box?
- Values outside 0–1 create anticipation or overshoot. Browsers support these ranges, so feel free to experiment for expressive motion.
ADVERT
ADVERT