Cubic Bezier / Easing Generator

Create custom easing functions for smooth CSS transitions and animations.

Curve Visualization
cubic-bezier(0.25, 0.10, 0.25, 1.00)
Generated Code
/* Cubic Bezier */
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

/* Usage examples */
.element {
  transition: all 0.3s cubic-bezier(0.25, 0.10, 0.25, 1.00);
}

.element {
  animation: slideIn 0.5s cubic-bezier(0.25, 0.10, 0.25, 1.00);
}

/* Animation example */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Named easing functions */
/* linear: cubic-bezier(0, 0, 1, 1) */
/* ease: cubic-bezier(0.25, 0.1, 0.25, 1) */
/* ease-in: cubic-bezier(0.42, 0, 1, 1) */
/* ease-out: cubic-bezier(0, 0, 0.58, 1) */
/* ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) */
Control Points
Adjust the bezier curve control points

Point 1 (P1)

Point 2 (P2)

Easing Presets
Click any preset to apply it