CSS Cubic Bézier Editor
Design CSS easing curves with a plotted graph, editable control points, animated motion preview and reusable transition CSS. Try standard or overshooting presets.
Change the settings or try a preset.
X coordinates must be 0–1 for a valid CSS easing function. Y can range from -2 to 3 here for overshoot. The preview animates transform only; apply the curve to your own property.
Using CSS Cubic Bézier Editor
Design CSS easing curves with a plotted graph, editable control points, animated motion preview and reusable transition CSS. Try standard or overshooting presets.
- Choose a preset or adjust the controls.
- Click Update curve and inspect the result.
- Read the status and limitations, then copy or download the output.
Example
Try the included presets. X coordinates must be 0–1 for a valid CSS easing function. Y can range from -2 to 3 here for overshoot. The preview animates transform only; apply the curve to your own property.
Questions & answers
What do the control points mean?
X is time and Y is progress. The curve begins at 0,0 and ends at 1,1. The two editable control points shape how quickly motion accelerates and slows.
Why are X values restricted?
CSS cubic-bezier requires both X control coordinates to be within 0 and 1. Y coordinates can go outside that range, creating progress overshoot. This editor limits Y to -2 through 3.
Can I try it before copying?
Use Play motion to animate the marker along a track. The graph shows the control points and curve, and the exported CSS uses the chosen duration.
Is this a complete keyframe generator?
No. It designs easing for transitions or existing animations. Use CSS Animation Generator for keyframe presets; this tool supplies the timing function.
Related tools
A useful next step for your task.
Developer & DataCSS Animation GeneratorCreate bounce, slide, fade, zoom, spin and swing CSS animations. Preview playback and timing, scrub the first iteration and export…
Developer & DataCSS Flexbox PlaygroundExplore Flexbox direction, wrapping, alignment and grow/shrink sizing with an adjustable preview. Export CSS, a standalone HTML demo or reusable…
Developer & DataCSS Box Shadow & Border Radius GeneratorDesign layered inset and outer box shadows, four corner radii, borders and colors with live previews. Copy or download CSS in pixels or rem units.
Developer & DataJSON Formatter & ValidatorHighly recommendedInstantly format, minify, and validate your JSON code. Features include live preview, syntax highlighting, tree viewer, and structure stats.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.