# 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.

**URL:** https://convertto.tech/t/cubic-bezier-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Animation Generator](https://convertto.tech/t/css-animation-generator): Generate keyframe animations — fade, slide, bounce, pulse, spin and shake.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Loader Generator](https://convertto.tech/t/css-loader-generator): Build a spinner, dots, bars or a pulse from pure CSS and copy the keyframes.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.