Cubic Bezier & CSS Easing Generator

About the Cubic Bezier & CSS Easing Generator

Design the timing of a CSS transition or animation by dragging the two control points of a cubic-bezier() curve. The graph shows time across and progress up, so a curve that rises above the top overshoots its end value and one that dips below the bottom pulls back first. Three lanes play your easing next to two others you pick — CSS’s own ease and ease-in-out, Tailwind’s and Material 3’s curves, or the classic Penner easings such as easeOutBack — and a time slider freezes all of them at the same moment.

Some motion cannot be drawn with one Bézier curve: a spring that wobbles, a ball that bounces, an elastic snap. For those the tool computes the motion exactly (a damped spring from stiffness, damping and mass; a bouncing ball from its bounciness) and writes it as the newer CSS linear() function with as many points as you choose, with the largest error shown. steps() easings are here too. Copy the result as CSS (with a cubic-bezier() fallback for older browsers), as a Tailwind class or theme variable, or as Web Animations API code.

Common uses

• Giving buttons, menus and dialogs motion that feels quick but not abrupt, with one named easing used across a design system.
• Replacing a JavaScript spring or bounce animation with plain CSS that runs on the compositor.
• Matching an easing from a design tool or another library, or checking what a cubic-bezier() you found does.
• Teaching how timing functions work by comparing them side by side.

How cubic-bezier() works

A timing function maps the share of time that has passed (x, 0 to 1) to the share of the change that is done (y). cubic-bezier(x1, y1, x2, y2) is a Bézier curve from (0, 0) to (1, 1) whose shape is set by two control points. The x values must stay between 0 and 1, because time cannot run backwards; the y values may go beyond, which is how overshoot and anticipation are made (CSS Easing Functions). The keywords are curves too: ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1) and ease-in-out (0.42, 0, 0.58, 1).

Springs, bounces and linear()

linear() draws straight lines between points you list, such as linear(0, 0.6 40%, 1) — at 40% of the time it is 60% done. With enough points it can follow any motion, including several overshoots, which one Bézier curve cannot. The spring here solves the equation of a damped spring (m·x″ + c·x′ + k·x = 0) exactly; with a damping ratio c ÷ (2√(k·m)) below 1 it overshoots, at 1 it is the fastest motion without overshoot. Where the curve bends places points where the motion changes direction (and on every impact of a bounce), which keeps the error low with few points; Evenly spaces them in time so the CSS needs no percentages. linear() works in Chrome and Edge 113, Firefox 112 and Safari 17.2 and later (MDN); the code adds the closest cubic-bezier() for older browsers.

The named easings

Robert Penner’s easing equations (sine, quad, cubic, quart, quint, expo, circ, back, elastic and bounce, each as in, out and in-out) are formulas, so a cubic-bezier() can only approximate most of them. The presets here are least-squares fits whose largest error is checked against each equation; quad, cubic and back in and out are polynomials of degree three or less, which a cubic Bézier matches exactly. Easing lists elsewhere sometimes give rounder numbers: cubic-bezier(0.34, 1.56, 0.64, 1) for easeOutBack, for example, is up to 0.5% off the equation. Elastic and bounce cannot be one curve at all, so they load as linear(). The Tailwind values are its --ease-in, --ease-out and --ease-in-out theme variables and the Material 3 values are the md-sys-motion easing tokens (material-web).

steps()

steps(n, position) jumps between n held values instead of moving smoothly. The position decides where the jumps happen: jump-end (the default, also written end) holds the start value first and reaches the end value only when the time is up; jump-start (start) jumps immediately; jump-none holds both the start and the end value and needs at least 2 steps; jump-both jumps at both ends. step-start and step-end are steps(1, start) and steps(1, end).

Limitations

• The fallback cubic-bezier() for a spring, bounce or elastic easing can only follow one overshoot; browsers without linear() get a simpler motion.
• A linear() easing with many points makes a long CSS value. Fewer points with Where the curve bends are usually enough: the summary shows the error.
• The preview moves dots; how an easing feels also depends on the duration, the distance and the property you animate.
• If your device is set to reduce motion, the preview plays only when you select Play. Use @media (prefers-reduced-motion: reduce) to tone down large movements on your own site.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.