CSS easing Generator

Adjust cubic-bezier values to generate a CSS easing function.

Category: Dev Tools

When to use?

Use it to customize the speed curve of a CSS animation or transition, visually adjusting cubic-bezier values to make the easing you want.

How to use

  • Adjust the 4 cubic-bezier control point values.
  • Check the easing with the animation preview.
  • Copy the generated cubic-bezier() value.

Input Explanation

Drag the four bezier control points (x1, y1, x2, y2) used in the CSS transition.

Calculation Basis

It normalizes the handle coordinates to 0.0–1.0 to generate a cubic-bezier(x1, y1, x2, y2) timing value and applies it to the sample element's transition-timing-function.

Usage Examples

  • Tune animations - Directly adjust the transition timing function value.
  • Quick pre-deploy check - Check inputs and output to reduce errors before dev/ops work.
  • Aid docs/reviews - Copy the result into dev docs, issues, or review comments.

Examples

  • Points (0.25, 0.1, 0.25, 1) → cubic-bezier(0.25, 0.1, 0.25, 1) (ease)
  • cubic-bezier(0.4, 0, 0.2, 1) → a transition that starts and stops smoothly

Cautions

  • Generated output is for reference; test carefully before production use.
  • Specific specs or framework-only syntax may cause compatibility issues.

Guides

What cubic-bezier easing is

cubic-bezier(x1, y1, x2, y2) specifies the animation speed curve. ease, ease-in, ease-out are aliases for predefined bezier values.

Check with preview

Press play to see the actual motion, then adjust to the feel you want. Paste the cubic-bezier value into a CSS transition or animation timing-function.

FAQ

What is the output format?

A cubic-bezier() value for transition-timing-function.

Can I preview the easing?

Press play to see a ball move along the cubic-bezier curve.

How are cubic-bezier values set?

Adjust the four points X1·Y1·X2·Y2 with sliders to auto-generate the cubic-bezier() function.

Where is easing used?

In a transition or animation timing-function to naturally tune acceleration/deceleration.

Related Tools

  • CSS gradient Generator - Adjust colors and angle to generate linear-gradient CSS.
  • CSS clamp() Generator - Auto-generate a CSS clamp() function from min/max values and a viewport range.
  • CSS Formatter - Neatly align CSS code by rules and properties.
  • JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.
  • UUID Generator - Generate up to 20 cryptographically secure UUID v4 values at once.
  • Password Generator - Generate secure random passwords in the browser by choosing length, character set, and count.