CSS Easing Generator — Cubic-Bezier Editor

A cubic-bezier() is a CSS timing function that controls how an animation or transition progresses over time. It takes four values — cubic-bezier(x1, y1, x2, y2) — which define two control points of a cubic Bézier curve. The x-axis represents time (0 = start, 1 = end) and the y-axis represents progress. By adjusting the control points you can create slow starts, fast endings, overshoots, and spring-like effects. CSS has five built-in keywords that are aliases: linear, ease, ease-in, ease-out, and ease-in-out.

Drag the two purple handles on the curve editor to shape the timing function. The solid dot (P1) controls the start of the curve and the lighter dot (P2) controls the end. You can also type exact values into the X1, Y1, X2, Y2 number inputs. The animation preview ball replays automatically so you can see the easing in real time. Click any preset button to instantly apply a named easing. Copy the cubic-bezier() value from the header or copy the full transition/animation snippet from the CSS Output section.

The tool includes the 5 standard CSS keywords (linear, ease, ease-in, ease-out, ease-in-out) plus 24 Penner-style named easings organized by curve family: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, and Back. Each family has three variants: easeIn (slow start), easeOut (slow end), and easeInOut (slow both ends). The Back family includes overshoot effects where the element briefly moves backwards before settling, creating a spring-like feel.

CSS cubic-bezier allows Y values outside the [0, 1] range, which creates overshoot effects. A Y value above 1 means the animation temporarily goes past the end state before snapping back — this creates the "easeOutBack" spring effect. A Y value below 0 creates an undershoot where the animation momentarily goes behind the start state. X values are constrained to [0, 1] because they represent time, which cannot be reversed. The Back presets use Y values like -0.56 and 1.56 to achieve their characteristic overshoot.

Copy the cubic-bezier() value from the CSS Output section and use it as the timing-function argument in a CSS transition or animation. For transitions: transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); For animations: animation: slide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); The tool also generates ready-to-paste transition and animation shorthand lines — just click the copy icon next to each row.

ease-in starts slow and ends fast — useful for elements leaving the screen (they accelerate as they exit). ease-out starts fast and ends slow — best for elements entering the screen (they decelerate as they arrive, feeling natural). ease-in-out starts slow, speeds up in the middle, then slows down at the end — great for elements moving between two on-screen positions. linear moves at a constant speed — useful for looping animations like spinners where natural deceleration would look wrong.

For most UI animations, ease-out or easeOutCubic is the right default — things entering the screen should decelerate naturally. For elements leaving the screen use ease-in. For modals, drawers, and cards that pop open, easeOutBack or easeOutQuint add a satisfying feel without being distracting. For micro-interactions like hover effects, easeInOutSine or easeInOutQuad are smooth and subtle. Avoid linear except for continuous loops, and use Back/Expo sparingly as they can feel excessive if overused.

Yes. You can apply a cubic-bezier timing function to the animation-timing-function property on the @keyframes rule or on individual keyframe steps: animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); You can also set different timing functions between individual keyframe steps to create complex multi-phase animations, for example applying ease-in from 0% to 50% and ease-out from 50% to 100%.

The Duration slider (0.3s – 3.0s) controls how long the preview animation runs. It also updates the transition and animation CSS snippets in the output section so the copied code reflects your chosen duration. Use a shorter duration (0.3–0.5s) for snappy micro-interactions and button presses, and a longer duration (0.6–1.2s) for page transitions and modal openings. The animation replays automatically whenever you change the easing or duration.

The cubic-bezier() value this tool generates works natively in CSS transitions and CSS animations. It also works with the Web Animations API (WAAPI) by passing it as the easing property. For JavaScript animation libraries like GSAP, Framer Motion, or Anime.js, you can use the four numeric values (x1, y1, x2, y2) directly — most libraries accept a bezier array or a cubic-bezier string. The tool displays the four raw values in the coordinate inputs so they are easy to extract.