SEOlust logo SEOlust
CSS & Design Generators

Cubic-Bezier Easing Generator

Design custom CSS easing curves visually — drag the curve, preview the timing on a moving element, and copy the cubic-bezier() value for any transition. Free.

All tools

💡 How to use

  • Drag the two purple handles to shape the easing curve.
  • Click Preview to watch the timing applied to a moving element.
  • Copy the cubic-bezier() value into any transition or animation.

Free Cubic-Bezier Easing Generator

Design custom CSS easing curves visually and copy the cubic-bezier() value in one click. Drag the curve handles, preview the timing on a moving element, and start from presets like ease, ease-in-out, and back — then paste the value into any CSS transition or animation. Free and browser-based.

What is a cubic-bezier easing curve?

Easing controls how an animation accelerates and decelerates over time, rather than moving at a constant speed. CSS provides keywords like ease and ease-in-out, but cubic-bezier() lets you define your own curve with four numbers — two control points that shape the acceleration. A well-chosen easing curve is what makes motion feel natural and polished instead of robotic.

How to read the four values

A cubic-bezier value looks like cubic-bezier(x1, y1, x2, y2):

  • x1 and x2 control the timing (horizontal), and must stay between 0 and 1.
  • y1 and y2 control the progress (vertical), and can go below 0 or above 1.
  • Values above 1 or below 0 create overshoot and anticipation — the basis of 'back' and 'bounce' style easings.
  • The start point is always 0,0 and the end point is always 1,1.

How to use the cubic-bezier generator

Shaping a curve is hands-on:

  • Drag the two handles to bend the curve.
  • Click a preset to start from a common easing.
  • Press Preview to watch the timing applied to a moving element.
  • Copy the cubic-bezier() value into your transition or animation.

Where to use the value in CSS

The generated cubic-bezier() value can be dropped anywhere CSS expects a timing function. Use it in the shorthand transition (for example, transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), in transition-timing-function, or in animation-timing-function for keyframe animations. The same value works in all of them.

Tips for natural motion

For UI that appears (menus, modals, tooltips), an ease-out feel — fast at the start, gentle at the end — reads best, because it mimics objects settling into place. For elements leaving the screen, ease-in works well. Add a little overshoot (a y value slightly above 1) for a lively, springy feel, but keep durations short: most interface transitions look best between 150ms and 400ms.

Pro tip

Reuse a small set of easing curves across your whole interface for consistency, just as you would with colors and spacing. Save your favorite cubic-bezier values as CSS custom properties (variables) so every transition shares the same motion language. Pair this with our CSS Animation Generator to build complete keyframe effects.

FAQ

Is this Cubic-Bezier Generator free?
Yes. It is completely free, runs in your browser, and requires no account or sign-up.
What is cubic-bezier in CSS?
cubic-bezier() is a CSS timing function that defines a custom easing curve for transitions and animations using four numbers — two control points that shape how the animation speeds up and slows down.
How do I create a bounce or overshoot effect?
Drag the handles so the curve rises above the top of the box, which sets a y value greater than 1. This creates overshoot, the basis of 'back' and springy easings. The 'back' preset is a good starting point.
Where do I use the cubic-bezier value?
Use it in transition, transition-timing-function, or animation-timing-function — anywhere CSS accepts a timing function. For example: transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1).
What is the difference between ease-in and ease-out?
ease-in starts slow and speeds up, which suits elements leaving the screen. ease-out starts fast and slows down, which suits elements appearing, because it feels like they settle into place.
Can the values go above 1 or below 0?
The x (timing) values must stay between 0 and 1, but the y (progress) values can go beyond that range to create anticipation and overshoot effects.
Does cubic-bezier work in all browsers?
Yes. cubic-bezier() is supported in every modern browser, including all current versions of Chrome, Edge, Firefox, and Safari.

Related tools

Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Loader & Spinner Generator for a faster SEO workflow.

  • CSS Box-Shadow Generator — Design CSS box-shadows visually with live preview — control offset, blur, spread, opacity, color, and inset, …
  • CSS Loader & Spinner Generator — Create pure-CSS loading spinners and animations — spinner, dual-ring, pulse, and dots styles with adjustable …
  • CSS Flexbox Generator — Build flexbox layouts visually — set direction, justify, align, wrap, and gap with a live preview, then copy …
  • CSS Gradient Generator — Create CSS gradients visually and copy the code in one click — linear, radial, and conic gradients with unlim…
  • CSS Text-Shadow Generator — Add shadows and glow effects to text visually — adjust offset, blur, opacity, and color with a live preview a…