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