Free CSS Cubic Bezier Generator

What a Cubic Bézier Timing Function Actually Is

In CSS, a timing function maps elapsed time (the input, from 0 at the start of the animation to 1 at the end) to a progress value (the output, also conventionally 0 to 1 but allowed to overshoot). The animated property (opacity, translate, color, anything CSS can transition) interpolates between its from-value and to-value at the rate the timing function describes. Linear timing means the property moves at a constant speed; the various ease functions accelerate, decelerate, or do both. cubic-bezier(x1, y1, x2, y2) is the general form: a Bézier curve from (0,0) to (1,1) with two free control points P1 and P2 that you specify with four numbers. The browser samples points along that curve to determine the property's progress at every frame of the animation. The four numbers define two control points: P1 = (x1, y1) shapes the start of the curve (typically 0–1 in both axes), P2 = (x2, y2) shapes the end. x values must stay in [0, 1] so the curve is a single-valued function of time; y values can exceed [0, 1] to produce overshoot and bounce effects (a y of 1.2 means the property momentarily exceeds its destination value before settling back).

Bézier Curves, Mathematical Lineage

The curves are named after Pierre Bézier, a French engineer at Renault who used them in the 1960s to design the smooth body panels of the Renault 16, published in 1968 as part of Renault's UNISURF CAD system. The mathematics had been developed independently a few years earlier (1959) by Paul de Casteljau at Citroën, but Citroën kept de Casteljau's work as a trade secret and Bézier's published version became the canonical reference. Both men converged on the same family of polynomial curves defined by control points, the de Casteljau algorithm for evaluating a Bézier curve at a given parameter is named after the unpublished pioneer. Cubic Bézier curves became the universal primitive of vector graphics because they're cheap to evaluate (a few multiplies and adds), trivially scalable (the math is invariant under affine transforms), and locally controllable (moving a control point changes only nearby curve segments). Adobe PostScript (1984) and PDF, the SVG specification (W3C Recommendation September 2001), and every modern font format use cubic Bézier curves as the building block for letterforms, icons and illustrations. CSS adopted the same curve type for animation timing, borrowing the visual-design world's standard mathematical primitive for the new use case of describing motion.

The CSS Animation Spec and Timing Functions

CSS animations and transitions both use the same family of timing functions. The CSS Animations Level 1 spec was first published as a public Working Draft in March 2009 (extracted from earlier WebKit-prefixed implementations) and continues to be maintained by the W3C CSS Working Group. The CSS Easing Functions Level 1 module formalises the timing-function syntax and is currently a Candidate Recommendation. Five named keywords are aliases for specific cubic-beziers: ease = cubic-bezier(0.25, 0.1, 0.25, 1): the CSS default for transitions, with a fast start and slow finish that feels natural for most UI motion. ease-in = cubic-bezier(0.42, 0, 1, 1): starts slow, accelerates to a fast finish. ease-out = cubic-bezier(0, 0, 0.58, 1): fast start, decelerates to slow finish; this is generally the most-used easing for UI elements entering the viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): symmetric S-curve, slow at both ends. linear = cubic-bezier(0, 0, 1, 1): no easing, constant rate; rarely the right choice for UI but appropriate for continuous looping animations like spinners. CSS also offers two non-Bézier timing options: steps(n, jumpterm) for stepped (frame-by-frame) animation, and linear() (added in CSS Easing Level 2) for piecewise-linear functions that approximate any curve.

Design-System Easing Curves

Major design systems publish opinionated easing curves that override the CSS defaults. Google Material Design specifies "standard easing" as cubic-bezier(0.4, 0, 0.2, 1): fast acceleration, slow deceleration, used for most UI transitions in Android and the web Material library; "decelerated easing" cubic-bezier(0, 0, 0.2, 1) for elements entering the screen; "accelerated easing" cubic-bezier(0.4, 0, 1, 1) for elements leaving. Apple's Human Interface Guidelines emphasise spring-physics animations rather than fixed Bézier curves, but iOS's UIKit ships a default cubic-bezier of approximately (0.25, 0.1, 0.25, 1) (the same as CSS ease). IBM's Carbon Design System uses cubic-bezier(0.5, 0, 0.1, 1) for its productive-motion category. Microsoft Fluent, Atlassian, Salesforce Lightning all specify their own curves. Robert Penner's easing equations (published in 2001 as part of his book on Flash motion) defined the named-curve vocabulary that nearly every animation library uses, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. Most can be expressed as cubic-beziers; the elastic and bounce variants cannot (they require multi-part piecewise functions because they oscillate).

Choosing the Right Curve for the Job

• Elements entering the viewport (modals appearing, cards sliding in, dropdowns opening), use ease-out or a decelerated curve like Material's cubic-bezier(0, 0, 0.2, 1). The element decelerates as it arrives, which feels like it's "settling into place."
• Elements leaving the viewport (modals closing, cards sliding out), use ease-in or an accelerated curve. The element accelerates as it departs, feeling like it's leaving with intent.
• Continuous animations (loaders, progress bars, ambient motion), use linear. Easing makes continuous motion feel jerky; constant velocity reads as steady.
• Hover states and button presses: short duration (100-150ms) with ease-out for the hover-in and ease-in or no easing for the hover-out. Button feedback should feel snappy.
• Emphatic motion that needs personality (toast notifications, success indicators), use a slightly overshooting curve like cubic-bezier(0.34, 1.56, 0.64, 1) for a subtle bounce that signals "something interesting just happened" without being annoying.
• Longer animations (over 500ms): use ease-in-out or a similar S-curve. Long animations with one-sided easing feel like they have a wrong-shaped beginning or end.

Performance Considerations

Custom cubic-bezier timing functions cost essentially nothing at runtime, the curve is a constant, browsers pre-compute the lookup table once, and per-frame evaluation is a few floating-point operations. The performance question is what property you animate, not the timing curve. Animating transform (translate, scale, rotate) and opacity uses GPU compositing and stays smooth at 60 or 120fps even on mid-range hardware. Animating top, left, width, height, margin, padding, or any property that triggers layout will jank on anything but the simplest pages because every frame triggers a full reflow. The "compositor-friendly" property list (transform + opacity, plus filter and a few others) is the usual safe set; everything else needs to be tested under the actual page load. The will-change CSS property hints to the browser that a property will animate, letting it pre-promote the element to its own compositing layer; use sparingly because every will-change reserves GPU memory.

Accessibility: prefers-reduced-motion

A meaningful minority of users (those with vestibular disorders, attention-deficit conditions, or simple personal preference) find motion design distracting or actively uncomfortable. The CSS Media Queries Level 5 spec defines the prefers-reduced-motion media feature, exposed as a system setting on macOS (System Settings → Accessibility → Display → Reduce Motion), Windows 10+ (Settings → Ease of Access → Display), iOS, Android and most major Linux desktops. The convention since around 2019: wrap any non-essential animation in @media (prefers-reduced-motion: no-preference) { ... } or invert with @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. The cubic-bezier curve choice doesn't matter for this, the spec asks the developer to disable or substantially shorten the animation when the user has expressed the preference. Modern design-system documentation (Material, Atlassian, GOV.UK) all include reduced-motion guidance.

Spring Physics, The Newer Alternative

Cubic-bezier timing functions describe motion as a fixed-duration interpolation along a hand-tuned curve. Spring physics describes motion as the natural settling of a damped harmonic oscillator: you specify mass, stiffness and damping, and the animation runs until the spring is at rest. Springs feel more natural for interruptible UI gestures because they have momentum that carries through interruptions, releasing a flick gesture mid-flight, the spring continues to its destination on a new curve rather than snapping. Apple's iOS uses spring physics for most native interactions (the bounce of a scroll view at the edge, the rubber-band effect of a swipe). React Spring (Paul Henschel), Framer Motion, and the CSS linear() easing function (when fed a sampled spring curve) bring spring semantics to the web. Cubic-beziers remain the right tool for fixed-duration UI transitions; springs are the right tool for gesture-driven, interruptible motion. This editor produces cubic-beziers, the right shape for 90% of UI animation work in 2026.

When You'll Reach for This Tool

• Designing a new animation by feel. Drag the control points until the preview ball moves the way you want, then copy the CSS. Faster than typing four numbers and refreshing the page.
• Matching an animation from another product. Reverse-engineer the timing of an animation you've seen elsewhere by adjusting until the preview matches your memory.
• Building a brand motion library. Settle on three or four specific cubic-beziers for "fast", "smooth", "emphatic", "bounce" and apply them consistently across the product.
• Reviewing a designer's animation spec. Paste the cubic-bezier values from a Figma motion spec, see whether the curve produces the motion the designer described.
• Engineer-designer handoff. A designer drags out the right curve in this tool, copies the CSS, and pastes it into a Slack message, much higher signal than a vague "make it bouncier."

Frequently Asked Questions

What do the four values mean?

They define the two control points of a cubic Bézier curve from (0,0) to (1,1). P1 = (x1, y1) shapes the start of the curve; P2 = (x2, y2) shapes the end. The x-axis is time (must be in [0, 1]); the y-axis is animation progress (can exceed [0, 1] for overshoot effects). y > 1 means the property momentarily exceeds its destination value before settling; y < 0 means the property briefly moves the wrong direction before approaching the target.

What's the default CSS easing?

For CSS transitions (transition: opacity 300ms;) the default is ease, equivalent to cubic-bezier(0.25, 0.1, 0.25, 1): fast start, slow finish. For CSS animations (animation: foo 1s;) the default is also ease. Override with transition-timing-function or animation-timing-function. For most UI motion the ease-out variant or a Material-style decelerated curve produces better-feeling results than the default.

How do I make a bouncy or overshoot effect?

Push y2 above 1 (typical values 1.2–1.6) so the curve briefly exceeds the destination before settling back. A common subtle bounce is cubic-bezier(0.34, 1.56, 0.64, 1). For pronounced bounces you'll want spring-physics or multi-keyframe animation rather than a single cubic-bezier, bezier curves can only have one peak, so true bouncing (multiple oscillations) requires keyframes at intermediate steps.

Are custom curves slower than the named keywords?

No, the named keywords are aliases for specific cubic-beziers, evaluated by the same code path. Performance depends on what property you animate (transform/opacity = GPU-composited and fast; layout-affecting properties like top/left/width = slow because of reflow), not on the timing curve. The cubic-bezier evaluation cost is negligible.

Does this tool work offline?

Yes, the curve canvas, preview ball animation, and CSS code generation all run entirely in your browser via JavaScript. No network calls during use. Take the page offline (airplane mode) after it loads and the editor still works. No telemetry; the curve values you settle on never leave your device.

Related Tools