Design smooth animations with a live cubic-bezier curve editor
Cubic Bezier Generator
Drag the colored handles to adjust the curve.
X values are clamped 0–1. Y values can exceed 0–1 for overshoot effects.
Progress curve (sampled)
cubic-bezier(0.25, 0.1, 0.25, 1)transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);animation: slide 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);A cubic-bezier generator lets you visually design CSS animation timing functions by positioning two control handles on an interactive curve. Whether you need a snappy ease-in, a smooth ease-out, or a bouncy overshoot, this tool outputs a ready-to-paste cubic-bezier() value for use in CSS transitions and animations — no manual math required.
A cubic-bezier() is a CSS timing function defined by four numbers — x1, y1, x2, y2 — that describe two control points of a Bézier curve. It controls the acceleration and deceleration of a CSS transition or animation over time.
Yes. The X values must stay between 0 and 1 (representing time), but Y values can exceed that range to create overshoot or anticipation effects — for example, a bouncy or spring-like motion.
Copy the cubic-bezier() value and use it as the timing-function in a transition (e.g. transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1)) or animation-timing-function property.
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), and linear = cubic-bezier(0,0,1,1).