offlineutils
100% offline
CSS
Free · no signup
Updated

Cubic Bezier Generator

A Cubic Bezier Generator lets you design a CSS easing function by dragging the two control points of a cubic-bezier() curve, previewing the motion in real time, and copying the exact transition-timing-function value — all in your browser.

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

About Cubic Bezier Generator

CSS transitions and animations accept a cubic-bezier(x1, y1, x2, y2) timing function that shapes how a value accelerates over time. This generator gives you the curve visually: drag either control point (the y-axis can overshoot past 0 and 1 for 'back' / anticipation effects), replay the motion on a live sample, or start from presets like ease, ease-in-out, and out-back. The copy-ready output drops straight into a transition or animation. Nothing is uploaded.

What Cubic Bezier Generator does

  • Drag both control points on an interactive curve
  • Y-axis overshoot for anticipation / 'back' easings
  • Live motion preview with one-click replay
  • Presets: linear, ease, ease-in, ease-out, ease-in-out, back
  • Copy-ready transition-timing-function output
  • Runs entirely in your browser — nothing uploaded

When to reach for Cubic Bezier Generator

  • Designing a custom ease for a button or modal transition
  • Matching a motion spec from a designer as a cubic-bezier value
  • Creating a springy overshoot feel without a JS animation library
  • Fine-tuning the timing of a CSS keyframe animation

How to use Cubic Bezier Generator

  1. 01

    Drag the control points

    Move the two handles to shape the easing curve, or pick a preset to start.

  2. 02

    Preview the motion

    Watch the sample replay the easing; hit Replay to see it again.

  3. 03

    Copy the CSS

    Copy the transition-timing-function value into your stylesheet.

When to use Cubic Bezier Generator vs alternatives

AlternativeUse Cubic Bezier Generator when…Use the alternative when…
cubic-bezier.comyou want the curve editor alongside the rest of your CSS tools with no tracking.you want to compare two curves side by side, which that site specializes in.
Keyword easings (ease, ease-in-out)you need a specific custom feel the keywords can't express.a standard keyword already looks right — it's fewer characters.

Frequently asked questions

What do the four cubic-bezier numbers mean?
They are the x and y coordinates of the two control points: cubic-bezier(x1, y1, x2, y2). x is progress through time (must be 0 to 1); y is the animated value's progress (it can go below 0 or above 1 to overshoot).
Can y values go outside 0 and 1?
Yes. y can be negative or greater than 1, which makes the animation overshoot and settle back — the basis of 'back' or anticipation easings. x must stay within 0 to 1 or the curve isn't a valid function of time.
Where do I paste the output?
Into any CSS transition or animation, e.g. transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); or as the animation-timing-function.
Does this work offline?
Yes. The editor and preview are pure client-side code — once the page loads it keeps working with no connection, and nothing you design is uploaded.

Related tools

Glassmorphism Generator

Create frosted-glass CSS with backdrop-blur and copy it.

Box Shadow Generator

Dial in a CSS box-shadow visually and copy the code.

CSS Gradient Generator

Design linear, radial & conic gradients and copy the CSS.