QuickFreeTools

Online CSS Cubic Bezier Generator

Create cubic-bezier() timing functions. Use presets or set two control points for animations.

Control point 1 (x1, y1)

Control point 2 (x2, y2)

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

.element {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

Frequently Asked Questions

What is cubic-bezier?
A CSS timing function that defines acceleration for animations. Two control points define the curve.
Can I use this in transition?
Yes. Use it in transition-timing-function or animation-timing-function.

Related Developer Tools