Cubic Bezier Generator
12 toolsDesign a custom CSS easing curve visually.
Runs in your browser — your files and text stay on your device
Design Flexbox and Grid layouts, shadows, animations, easing curves, filters, and glassmorphism effects with live controls and a live preview instead of guessing values by hand — copy the generated CSS straight into your stylesheet.
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.