Cubic-bezier easing generator

What this cubic-bezier generator does

Every CSS easing is a cubic Bézier curve from (0,0) to (1,1): the x-axis is time, the y-axis is progress. This editor lets you drag the two control points on an SVG graph, type exact coordinates, or load a preset, while a ball on a track plays the resulting motion on a 1.6-second loop so you can judge the feel immediately. Two copy buttons give you the bare cubic-bezier(...) value and a full transition-timing-function declaration.

How to use it

1. Drag the two purple handles. The dashed diagonal is linear for reference.
2. Watch the Preview ball; it restarts whenever the curve changes.
3. Click a preset — ease, ease-in, ease-out, ease-in-out, smooth out, back — to start from a known curve.
4. Fine-tune with the x1, y1, x2, y2 fields (x is clamped to 0–1).
5. Copy either output and paste it into your CSS.

Preset and reference curves

Name	cubic-bezier value	Feel	Typical use
linear	0, 0, 1, 1	constant speed	fades, progress bars
ease (CSS default)	0.25, 0.1, 0.25, 1	slight ease-in, soft ease-out	general purpose
ease-in	0.42, 0, 1, 1	slow start, abrupt end	elements leaving
ease-out	0, 0, 0.58, 1	fast start, soft landing	elements entering, hover
ease-in-out	0.42, 0, 0.58, 1	symmetrical	moving between positions
smooth out (expo)	0.16, 1, 0.3, 1	very fast start, long settle	menus, sheets, modals
back	0.68, -0.55, 0.27, 1.55	pulls back then overshoots	playful buttons, toasts
Material standard	0.2, 0, 0, 1	emphasized decelerate	most Material transitions
Material accelerate	0.3, 0, 1, 1	exit	dismissals
Material decelerate	0, 0, 0, 1	enter	incoming surfaces
Apple-style ease-out	0.32, 0.72, 0, 1	crisp with long tail	sheet presentation
ease-in-out quint	0.83, 0, 0.17, 1	dramatic	page transitions

The first six are built-in presets; type the others into the number fields.

Reading the curve

• Steep near the start (y rises quickly for small x) means the motion starts fast — an ease-out.
• Flat near the start means a slow build — an ease-in.
• A handle dragged above y = 1 makes progress exceed 100% before coming back: overshoot. Dragging below 0 at the beginning adds anticipation (the element first moves slightly backward).
• Both x values matter for perceived duration. The same curve feels snappier at 200ms and sluggish at 600ms; pick duration and easing together.

Because the curve is a function of time, it must never fold back on itself — that is why x is clamped to 0–1 but y is free.

Putting it in CSS

.sheet {
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sheet.is-open {
  transform: translateY(0);
}

@keyframes pop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.toast {
  animation: pop 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}

Animate only transform and opacity for 60fps results; easing applies per-property, so you can give opacity a linear curve and transform an ease-out in the same rule. Respect prefers-reduced-motion by shortening the duration or removing the overshoot. Durations, choreography and the linear() function for multi-bounce springs are covered in the transitions and animations guide.

Related tools and snippets

• Hover lift card snippet — a transition that benefits from a custom ease-out.
• Shake animation snippet — keyframes where easing per step changes the whole character.
• Pulse glow button snippet — looping animation, try ease-in-out vs a custom curve.
• Box shadow generator — pair a lift transition with the right shadow.
• Cubic-bezier generator announcement — background on why the tool exists.