RevealTheme logo

Cubic Bezier Easing Generator

Build a CSS cubic-bezier() easing curve with four sliders and copy the ready-to-paste transition-timing-function declaration. Four named presets are included as starting points.

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

How to use this tool

  1. 1

    Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.

  2. 2

    Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.

  3. 3

    Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.

  4. 4

    Copy that declaration by hand and drop it into your CSS transition or animation rule.

What does a CSS cubic-bezier() easing curve actually define?

An easing function maps animation progress (input time, 0 to 1) to output progress (0 to 1), controlling how a transition speeds up and slows down rather than moving at a constant rate. CSS cubic-bezier() describes this with a Bezier curve fixed at (0,0) and (1,1), shaped by two control points P1 = (a, b) and P2 = (c, d) — the exact four numbers these sliders set. A steeper section means faster motion there; a flatter section means slower. Per the CSS spec, the x coordinates (a and c) must stay within 0 to 1 because time cannot run backward, while the y coordinates (b and d) may exceed that range to produce anticipation or overshoot (bounce-like) effects. This tool lets all four sliders go from -1 to 2, so it is possible to dial in a and c values outside 0 to 1 that browsers will reject as invalid; keep a and c between 0 and 1 for output a browser will accept. The named presets (ease, ease-in, ease-out, ease-in-out) reproduce the same fixed values defined in the CSS spec.

Common use cases

  • Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.

  • Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.

  • Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.

  • Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.

  • Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.

  • Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.

Frequently asked questions

What is the difference between ease, ease-in, ease-out, and ease-in-out?▼
ease (the default, 0.25, 0.1, 0.25, 1) starts quickly, then slows. ease-in (0.42, 0, 1, 1) starts slow and accelerates into the end. ease-out (0, 0, 0.58, 1) starts fast and decelerates. ease-in-out (0.42, 0, 0.58, 1) is slow at both ends and fastest in the middle. Click any of the four buttons to load its values.
Why can I set values that browsers will not accept?▼
The sliders range from -1 to 2 so you can experiment, but the CSS spec requires the x coordinates a and c to be between 0 and 1. If you set a or c outside that range the generated cubic-bezier() is invalid and the browser ignores it, falling back to its default. The y values b and d may legitimately go outside 0 to 1 to create overshoot or anticipation.
How do I use the output in my CSS?▼
Copy the generated line, for example transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);, into a rule that also defines a transition or animation. You can also use just the cubic-bezier(...) part as the third value of a transition shorthand or the animation-timing-function property.
Does this tool show a visual graph of the curve?▼
No. It is a slider-based generator that outputs the cubic-bezier() text and live numeric values; there is no plotted curve or animated preview. Pair it with your browser dev tools, which plot and animate the same curve, if you want a visual check before shipping.
Can I create a bounce or overshoot effect?▼
A single cubic-bezier() can overshoot once by setting the y control values (b or d) beyond 0 to 1, which makes the value pass its target and settle back. It cannot produce a true multi-bounce that oscillates several times; for that you need CSS @keyframes or the steps()/linear() functions, not a single Bezier.
Is my data uploaded anywhere?▼
No. Everything runs in your browser with local React state. Your slider values and the generated CSS never leave your device and nothing is sent to a server.

Related tools

Color Converter (HEX/RGB/HSL)

Convert colors between HEX, RGB, HSL, OKLCH.

CSS Box Shadow Generator

Build CSS box-shadow visually.

CSS Gradient Generator

Build linear and radial CSS gradients.

Color Palette Generator

Generate harmonious color palettes from any base color.

CSS Border Radius Generator

Build complex CSS border-radius visually.

CSS Clamp Generator

Generate responsive CSS clamp() functions.

Subscribe for updates

We do not sell your email. We do not spam.

© 2026 RevealTheme. All rights reserved.