E Encoder.guru
All tools Features
CSS · ANIMATION

Cubic Bezier / Easing Curve Generator

Drag the two control points to design a custom easing curve, watch the live animation preview, and copy the cubic-bezier() CSS.

Curve editor

Presets

CSS Output

Related tools

CSS Box Shadow Generator

Build multi-layer box shadows visually and copy the CSS instantly.

CSS Gradient Generator

Design linear, radial and conic CSS gradients with live preview.

Border Radius Generator

Design per-corner border radii visually and get the exact CSS output.

CSS Clip-Path Generator

Pick a preset shape or drag points to design a custom clip-path polygon, with live preview.

What is a cubic-bezier easing curve?

CSS transition-timing-function and animation-timing-function accept a cubic-bezier(x1, y1, x2, y2) curve that controls the rate of change over time — how an animation accelerates and decelerates between its start and end values. Keywords like ease and ease-in-out are just shorthand for specific cubic-bezier curves.

How to use this tool

  1. Drag the two control point handles to shape the curve, or pick a named preset.
  2. Click Replay animation to see the easing applied to a moving ball.
  3. Copy the CSS and drop it into any transition or @keyframes rule.

Frequently Asked Questions

Why can't I make a bounce effect with cubic-bezier?

A single cubic-bezier curve is monotonic in time (it can overshoot past 0–1 but only once) — true multi-bounce effects need @keyframes with several steps, or the linear() easing function in newer browsers.

What do the y-values above 1 or below 0 mean?

They create overshoot — the animated value briefly goes past its target before settling, which is how "back" and "anticipate" style easings work (see the Back presets).