Super Boring Tools

Search tools

Find a tool by name or what it does.

Cubic Bezier Generator

Shape a CSS easing curve by dragging two handles, race it against a second curve in motion, and copy the code.

Curve
12

cubic-bezier(0.25, 0.1, 0.25, 1)

Drag handles 1 and 2, or focus one and use the arrow keys. Everything runs in your browser.

Presets

Compare
Preview
Primary

Sets the playback speed of the preview and the duration in the copied CSS.

CSS
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

How to make a custom cubic-bezier easing

  1. Drag the handles

    Drag the two control-point handles on the curve to shape the easing. The horizontal position stays between the start and end, while the vertical position can overshoot for a bounce.

  2. Pick a preset or refine

    Click a preset like ease-in-out or linear to jump to a known curve, then nudge the handles until the motion feels right.

  3. Race a second curve

    Turn on compare to overlay a ghosted second curve with its own handles. Two dots then run side by side at a shared duration so you can see which easing feels better.

  4. Watch the preview and copy

    The dots replay the timing on every change. When the motion looks right, copy the full CSS rule or just the cubic-bezier() value.

Why use this tool

Draggable control handles

Two handles set the four cubic-bezier numbers by feel. The horizontal axis is clamped to the start-to-end range; the vertical axis is free to overshoot for spring and bounce effects.

Race two curves in motion

Turn on compare to overlay a second, ghosted curve with its own handles. Two dots run side by side at a shared duration, so two easings that look alike on paper reveal their real difference.

Standard easing presets

One click loads ease, ease-in, ease-out, ease-in-out, or linear, matching the values browsers ship, as a starting point to refine. Presets load into either curve.

Adjustable preview duration

A duration slider from 0.1s to 2s sets how fast the dots replay and feeds the same value into the copied CSS, so the preview matches what you ship.

Copy the value or the full rule

Copy the whole transition declaration with your cubic-bezier and duration baked in, or copy just the cubic-bezier() value to drop into an existing rule.

Overshoot support

Vertical handle positions past the top or bottom edge produce curves that travel beyond the target and settle back, the basis of springy motion.

About this tool

A cubic-bezier easing curve controls how an animation speeds up and slows down between its start and end. The browser default, ease, is fine for a lot of things, but it is also the motion every other site uses. A custom curve lets interface motion feel deliberate: a quick start that eases into place, a slow build that snaps at the end, or a gentle glide that never feels mechanical. This generator lets you shape that curve by dragging two handles instead of typing numbers you cannot picture.

The four numbers are two control points, written as cubic-bezier(x1, y1, x2, y2). The x values are time and stay between 0 and 1; the y values are progress and can go below 0 or above 1. When a y value overshoots the 0 to 1 range, the animation travels past its target and settles back, which is how bouncy and springy motion is built. Small overshoots add life to buttons, cards, and menus; large ones read as playful. Keeping the handles inside the square gives smooth, classic easing.

The preview tells the truth. Two curves can look similar as static lines yet feel completely different in motion, so a dot replays your exact timing function on every change. Turn on compare to add a second, ghosted curve with its own handles and race both dots at a shared duration, then swap them to feel the difference directly. A duration control tunes the playback speed and the value baked into the copied CSS. Reach for a preset when you want a known starting point, then refine. When the motion is right, copy the full rule or just the value. Pair custom easing with the CSS gradient generator and the box shadow generator to finish a component's look and feel.

Frequently asked questions

What do the four cubic-bezier numbers mean?
They are two control points written as cubic-bezier(x1, y1, x2, y2). The x values are time and are locked between 0 and 1. The y values are progress and can go past 0 and 1. Together they define the acceleration curve of an animation.
What are overshoot values?
When a y value goes below 0 or above 1, the curve moves past its target and comes back, producing a bounce or spring. Drag a handle above the top edge or below the bottom edge to try it, and watch the dot travel past the end and settle.
Which easing presets are included?
ease, ease-in, ease-out, ease-in-out, and linear, using the same values browsers apply for those keywords. They are handy as a starting point before you refine the handles.
Do custom cubic-bezier curves work in every browser?
Yes. The cubic-bezier() timing function is part of standard CSS and is supported by every current browser for both transitions and animations.
Can I compare two easing curves?
Yes. Turn on compare to overlay a second, ghosted curve on the same graph. It has its own draggable handles, its own value field for pasting a cubic-bezier() value, and its own presets. Two dots then run side by side at the same duration so you can race the easings against each other, and a swap button flips which is which.
How do I use the copied CSS?
Paste the transition declaration onto the element you want to animate, or use the copy value only button to grab just the cubic-bezier() value for an existing rule. The duration slider sets both the preview speed and the duration in the copied declaration.
Is anything uploaded?
No. The curve editor, the preview, and the generated CSS all run in your browser. Nothing is sent to a server or stored.

Related tools