Design

Cubic Bezier Generator

Shape the feel of an animation by dragging two control points on a curve and watching real elements move in time with it. A cubic-bezier function is what turns a flat, mechanical transition into something that accelerates, settles, or overshoots the way good motion does, and seeing the curve next to the motion makes that relationship obvious. Start from the CSS keywords or a named easing, then pull the handles until the timing matches what you have in mind. Position, scale, and opacity demos play on a loop so you can compare how the same curve reads across different properties, and the output is a ready-to-paste timing function for transitions or animations, computed entirely in the browser.

  • Drag two control points and watch the easing curve update against a live motion preview
  • Start from CSS keywords or named easings like easeOutBack, then fine-tune by hand
  • See position, scale, and opacity demos so one curve is judged across several properties
  • Overshoot beyond the 0 to 1 range for spring-like back easings, not just smooth ramps
  • Copy a ready timing function for transitions or animations, computed in the browser
tools/Cubic Bezier Generator
ease
Position
Scale
Opacity
600ms
transition
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

/* shorthand */
transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
Quick actions

Overview

Put the easing curve and the motion it produces side by side, so timing becomes something you feel and adjust rather than a string of four numbers you tweak blind in a stylesheet.

  1. 01

    Direct curve editing

    Drag the two control points to reshape acceleration and deceleration, or type exact values when you need to match a curve from a design spec.

  2. 02

    Live motion across properties

    Looping position, scale, and opacity demos show how the same curve reads differently when it drives movement, sizing, or fading.

  3. 03

    Keywords and named easings

    Begin from linear, ease, ease-in-out, or a named easing such as easeOutCubic and easeInOutBack, then refine instead of starting from scratch.

  4. 04

    Overshoot and spring feel

    Control points can move past the 0 to 1 band, so back easings that overshoot and settle are as easy to build as smooth ramps.

  5. 05

    A linear reference baseline

    A faint straight line and a linear ghost in the preview make it clear how far your curve departs from constant, lifeless motion.

  6. 06

    Clean, copy-ready output

    The result is a standard cubic-bezier timing function plus a shorthand example for transition or animation, ready to paste into any stylesheet.

How to use

Turn a vague sense of how motion should feel into an exact easing function, whether you are matching a design or tuning by intuition.

  1. 01

    Pick a starting point from the CSS keywords or a named easing close to the feel you want.

  2. 02

    Drag the start and end control points to adjust how the motion accelerates and decelerates.

  3. 03

    For a spring-like effect, pull a control point above or below the box so the curve overshoots.

  4. 04

    Set the duration and watch the position, scale, and opacity demos until the timing feels right.

  5. 05

    Choose transition or animation, then copy the timing function into your stylesheet.

Details

Motion is part of an interface, not decoration on top of it, so an easing editor needs to map onto the real cubic-bezier syntax and show the result honestly.

  • Two draggable control points map directly to the four numbers of a cubic-bezier function
  • Numeric inputs accept exact values for matching a curve from a design tool or specification
  • Control points can overshoot the 0 to 1 range to build back and spring-like easings
  • Preset groups cover the CSS keywords and a full set of named easings from sine to back
  • Each preset shows a small curve thumbnail so its shape is recognizable before you apply it
  • Position, scale, and opacity demos loop together to compare the curve across properties
  • A linear ghost and diagonal reference line show how far the curve departs from constant speed
  • An adjustable duration reveals how the same curve feels at fast and slow timings
  • Output covers both the timing-function declaration and a transition or animation shorthand
  • Everything runs locally in the browser, so motion design for unreleased work stays private

Use cases

Easing is what separates motion that feels designed from motion that feels like a default. The right curve depends on what is moving and why, and trying it against live elements is the fastest way to decide.

  1. Button and hover transitions

    A short ease-out gives buttons and links a responsive, snappy feel on hover and press without looking sluggish or robotic.

  2. Modals and popovers

    Entrances often read better with a slight overshoot, while exits stay quick and linear, so panels feel alive coming in and decisive going out.

  3. Menus and accordions

    Expanding and collapsing sections benefit from an ease-in-out curve so height changes start and end gently instead of snapping.

  4. Toasts and notifications

    A back easing that overshoots slightly draws the eye to an incoming toast, then settles it into place without feeling jarring.

  5. Page and route transitions

    Smooth ease-in-out curves on larger movements keep navigation between views feeling continuous rather than abrupt.

  6. Loaders and progress

    Looping indicators and progress bars need carefully chosen easing so repeated motion feels steady rather than mechanical.

  7. Matching a design spec

    Paste the exact control point values from a design tool to reproduce a motion curve precisely in CSS for handoff.

  8. Building a motion system

    Settle on a small set of reusable easing curves so animation across a product shares one consistent sense of timing.

See also

Motion sits on top of layout, so set the structure first with Flexbox and Grid Generator , and when a transition also changes elevation, pair the easing with depth from Box Shadow Generator so movement and shadow shift together rather than fighting each other.

Best practices

Easing is easy to overdo, so a few habits keep motion feeling intentional and consistent rather than busy or distracting.

  • Use ease-out for things entering or responding to input, since fast-then-slow feels responsive and natural.
  • Use ease-in for things leaving the screen, where slow-then-fast reads as an element accelerating away.
  • Reserve overshoot and spring curves for moments that deserve attention, not every transition on the page.
  • Keep durations short for small UI changes, roughly 150 to 300ms, so the interface stays quick to use.
  • Match the curve to the distance moved, because the same easing feels different across small and large movements.
  • Standardize on a few named curves rather than a unique cubic-bezier for every component.
  • Respect reduced-motion preferences by toning down or removing large movements for users who ask for it.
  • Test the curve at the real duration and size, since timing that feels right in a demo can feel slow in context.

Limitations

This tool focuses on cubic-bezier timing for CSS, so a few related areas of motion are intentionally out of scope.

  • It produces cubic-bezier curves. Stepped timing with the steps() function follows different syntax and is not generated here.
  • CSS cubic-bezier requires both x values to stay within 0 to 1, so the horizontal handles are clamped to that range.
  • It outputs a timing function, not full keyframes. The properties and values being animated are defined in your own CSS.
  • The preview uses fixed demo elements, so confirm the feel on your real components at their actual size and distance.
  • Spring physics from animation libraries can be approximated with overshoot but are not identical to a cubic-bezier curve.
  • Perceived smoothness also depends on frame rate and what else is repainting, which this editor does not measure.

FAQ

Questions that come up most often when shaping easing curves and turning a motion idea into CSS that ships.

What is a cubic-bezier easing curve?

It is a function that maps time to progress using two control points. By bending the curve you control how an animation speeds up, slows down, or overshoots, instead of moving at a constant rate.

Is the generated CSS ready for production?

Yes. The output is a standard cubic-bezier timing function and can be pasted into transition or animation declarations in any stylesheet without changes.

When should I use ease-in versus ease-out?

Use ease-out for elements entering or reacting to input, since they decelerate into place. Use ease-in for elements leaving, since they accelerate away. ease-in-out suits movements that both start and end on screen.

How do I make a bouncy or spring effect?

Drag a control point above or below the editing box so the curve overshoots past its end value, which creates the back-and-settle motion seen in spring-like easings such as easeOutBack.

Why are the X values limited but Y is not?

CSS only allows cubic-bezier X values, which represent time, to stay between 0 and 1. The Y values, which represent progress, can go outside that range to create overshoot.

Does it generate keyframes too?

No. It generates the timing function. You define what is being animated, such as transform or opacity, in your own transition or keyframe rules and apply the curve to them.

Can I match an exact curve from my design tool?

Yes. Type the four control point values directly into the number inputs to reproduce a specific cubic-bezier curve from a design file or specification.

Is anything uploaded while I edit?

No. The curve editing, preview, and CSS generation all run locally in the browser, so the tool is safe for unreleased product UI and confidential motion design.

Related tools

Timing is one layer of a polished interface. With the easing decided, return to layout and depth so structure, elevation, and motion all read as part of one considered design.