CSS Cubic Bezier Generator

Name: CSS Cubic Bezier Generator
Availability: InStock

Design a custom CSS cubic-bezier() easing curve with a live graph and animation preview, then copy the generated CSS instantly.

Adjust the two control points, preview the curve and the resulting animation, and copy the CSS.

X1: 0.25

Y1: 0.1

X2: 0.25

Y2: 1

Duration: 1s

Animation Preview

Presets

Generated CSS

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