Cubic Bezier Generator
12 toolsDesign a custom CSS easing curve visually.
Runs in your browser — your files and text stay on your device
Design a custom CSS easing curve by dragging the two control points of a cubic-bezier editor, or start from a preset such as ease, ease-in-out or back, and copy the value. The curve controls how an animation accelerates and settles, which has a big effect on how polished motion feels. Click Preview to watch a dot move with your curve.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);How to use this tool
- 1Pick a preset or drag the two control-point handles on the curve.
- 2Click ▶ Preview to see the easing applied to a moving dot.
- 3Copy the generated cubic-bezier() value.
Frequently asked questions
What do the two control points control?
They define the curve's shape — how quickly the animation accelerates and decelerates between its start and end points.
Is this generated on a server?
No — the curve, preview, and CSS are all computed and rendered locally in your browser.