Cubic-Bezier Easing Editor — CSS Animation Curves
Visually design CSS cubic-bezier easing curves. Drag the control points, watch a live animated preview, pick presets, and copy the timing function.
Cubic-Bezier Easing Editor — Craft Smooth CSS Animation Curves
Design the perfect easing curve for your CSS animations and transitions. Drag the two control points to shape the curve, watch a ball replay the motion in real time, try classic presets, and copy the cubic-bezier() timing function straight into your stylesheet.
What is an easing curve?
Easing controls how an animation speeds up and slows down over its duration. Instead of moving at a constant rate (linear), real-world motion accelerates and decelerates. CSS expresses this with cubic-bezier(x1, y1, x2, y2) — four numbers that define a curve from start (0,0) to end (1,1) using two control points.
How to use it
- Drag the pink handles: each one bends the curve near the start or the end
- Watch the ball: the live preview replays your easing on a loop so you feel the motion
- Overshoot: drag a handle above or below the box to create bounce/anticipation effects (values outside 0–1)
- Presets: start from ease, linear, ease-in/out, or a springy bounce
- Copy: grab the ready
cubic-bezier()value
Understanding the four numbers
- x1, y1: the first control point — shapes the beginning of the animation
- x2, y2: the second control point — shapes the end
- The X values are locked between 0 and 1 (time can’t go backwards); the Y values can exceed that range to overshoot
Where to use the result
Paste the value into any CSS transition or animation, for example: transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);. It also works with animation-timing-function.
Privacy
This tool runs entirely in your browser. Nothing is uploaded or stored.