Skip to content
Convertto

Cubic Bezier Easing Generator

Build custom CSS easing curves and see the motion they produce.

To build a custom easing curve, adjust the two control points and watch both the curve and an animated demo update. Y values outside 0 to 1 overshoot, which is what creates a spring or bounce feel rather than a plain ease-out.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

What makes an easing curve feel "springy"?

A Y control point above 1 makes the value overshoot its target before settling, which reads as bounce. cubic-bezier(0.34, 1.56, 0.64, 1) is a widely used spring curve.

How to use the cubic bezier easing generator

  1. 1Set the p1 x.
  2. 2Set the p1 y.
  3. 3Set the p2 x.
  4. 4Set the p2 y.
  5. 5Set the duration.
  6. 6The result appears immediately — copy or download it.

Embed this tool

Put the working cubic bezier easing generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Animation GeneratorGenerate keyframe animations — fade, slide, bounce, pulse, spin and shake.CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Loader GeneratorBuild a spinner, dots, bars or a pulse from pure CSS and copy the keyframes.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.

Last updated

More css generators