How Do I Create a Custom CSS Easing Curve with cubic-bezier()?
Updated 2026-06-27
To create a custom CSS easing curve, drag the two control handles in a visual cubic-bezier editor until the live preview moves the way you want, then copy the generated cubic-bezier() value into your transition or animation. The fastest way to do this is the CSS Cubic-Bezier Easing Generator, which gives you a draggable curve, eight presets, and an animated box that updates as you tweak.
Why cubic-bezier() beats the built-in keywords
CSS ships with a handful of timing keywords: linear, ease, ease-in, ease-out and ease-in-out. They are fine for simple motion, but every site that uses them ends up feeling the same. A cubic-bezier() function gives you direct control over the acceleration curve using four numbers, so you can dial in motion that feels snappy, gentle, or playful.
The four numbers map to two control points:
- x1, y1 shape how the animation starts (the first handle)
- x2, y2 shape how it finishes (the second handle)
- A straight diagonal line equals linear motion; bending it changes the feel
How to build your curve
Using the CSS Cubic-Bezier Easing Generator is the quickest route:
- Start from a preset like ease-in-out, linear or overshoot so you are close before fine-tuning.
- Drag handle 1 and handle 2 on the curve, or type exact values into the X and Y inputs.
- Watch the preview box slide with your easing and press Replay to compare tweaks.
Remember that X is clamped to 0 to 1 because the CSS spec requires it, while Y is free to roam. That single rule is the key to expressive motion.
Making bounce and anticipation effects
The interesting part is that Y can go beyond the 0 to 1 range. When a control point sits above 1, the curve overshoots its target and snaps back, which reads as a bounce. When it dips below 0, the element pulls back before launching forward, which reads as anticipation.
Try these starting points:
- Overshoot finish: set y2 to around 1.55, or pick the overshoot preset, for a springy landing.
- Anticipation: use the anticipate preset, where a negative Y makes motion wind up first.
- Smooth both ends: the back-in-out preset overshoots at both the start and the end.
Keep overshoot subtle for UI; a little goes a long way before it feels gimmicky.
Putting the value in your CSS
Once the preview looks right, copy the output. The tool gives you two options: the full declaration for a transition-timing-function, and Copy value for just the bare cubic-bezier() function. The bare value works anywhere a timing function is accepted, so you can paste it into a transition shorthand, the animation property, or animation-timing-function inside a @keyframes rule.
For example, you would apply it to a transition by setting transition to something like transform 0.3s followed by your copied cubic-bezier() value. The same value drives a looping keyframe animation just as well.
Pair it with a loading animation
A great easing curve shines brightest on motion you can reuse. After dialing in your timing, head to the CSS Loader Generator to build a spinner or progress animation, and drop your custom cubic-bezier() value into its timing function for a loader that feels uniquely yours.
Privacy and convenience
Everything here runs 100% in your browser. Your curves are computed locally with nothing uploaded to any server, and your last curve is remembered in your own browser storage so it is waiting for you next time. That makes the CSS Cubic-Bezier Easing Generator safe to use on client work without anything leaving your machine.