How to use the Cubic Bezier Generator
- Drag the two purple handles to shape the curve, or type the four numbers.
- Press Play to race your curve against a standard easing such as
ease. - For physical motion, switch to Spring or Bounce and adjust stiffness, damping or bounces.
- Copy the value for CSS, Tailwind, the Web Animations API, Framer Motion or GSAP.
What is a cubic-bezier easing?
An easing curve maps time (x axis) to progress (y axis). cubic-bezier(x1, y1, x2, y2) describes that curve with two control points; the start (0,0) and end (1,1) are fixed. Curves that rise quickly feel snappy (ease-out), curves that start flat feel heavy (ease-in), and y values above 1 or below 0 overshoot for a playful “back” effect. The x values must stay between 0 and 1.
Which easing should I use?
| Motion | Easing | Why |
|---|---|---|
| Element entering the screen | ease-out (e.g. cubic-bezier(.16,1,.3,1)) | Arrives fast, settles gently |
| Element leaving | ease-in | Accelerates away |
| Moving on screen | ease-in-out | Natural start and stop |
| Playful UI, toggles | back / spring | A small overshoot feels alive |
| Progress, spinners | linear | Constant speed |
Springs and bounces with linear()
A cubic-bezier can overshoot only once. Real springs wobble several times and bounces hit the floor repeatedly, which needs the CSS linear() function: a list of progress values the browser joins with straight lines. This tool simulates a spring (stiffness, damping, mass) or a bouncing ball and samples it into linear(), along with the duration the motion needs to settle. linear() works in Chrome and Edge 113+, Firefox 112+ and Safari 17.2+; use the cubic-bezier fallback for older browsers.
Use your curve in the CSS animation generator or for loaders in the CSS loader generator.
Tools that pair well with the Cubic Bezier Generator
- CSS Keyframes Generator — A visual editor for @keyframes.
- CSS Hover Animation Generator — Design hover animations for buttons, cards, links and icons.
- Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
Frequently asked questions
Can y values go above 1 or below 0?
How do I use a cubic-bezier in Tailwind?
ease-[cubic-bezier(0.16,1,0.3,1)], or add it to theme.extend.transitionTimingFunction. The output panel shows both.