UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Cubic Bezier Editor

Visually edit and preview CSS cubic-bezier easing curves with interactive control points and animation preview.

About Cubic Bezier Editor

The Cubic Bezier Editor provides an interactive canvas for designing custom CSS cubic-bezier transition and animation easing curves. Drag the two Bezier control points to shape the curve and see an immediate animation preview of how an element would move with that easing. The tool displays the equivalent CSS cubic-bezier() function value, lets you compare against named easing presets (ease, ease-in, ease-out, ease-in-out, linear), and shows the curve's velocity profile to help understand how fast the animation is at different points. Copy the cubic-bezier() value directly into your CSS with one click.

Why use Cubic Bezier Editor

  • Interactive drag handles make curve design intuitive without manual value entry.
  • Live animation preview shows the real motion feel of the curve.
  • Preset library includes all CSS named easings for quick starting points.
  • Shows P1 and P2 coordinates numerically so you understand the curve mathematically.
  • Live animation preview shows the real motion feel of the curve, not just the static graph.
  • Shows P1 and P2 coordinates numerically so you understand the curve mathematically and can communicate values precisely.

How to use Cubic Bezier Editor

  1. Drag the two blue control points on the Bezier curve canvas to shape the curve.
  2. Watch the animation preview update to show how the easing feels.
  3. Compare to preset easings (ease, ease-in, ease-out) using the presets panel.
  4. Click Copy CSS to copy the cubic-bezier() value for use in your stylesheets.
  5. Watch the animation preview update to show how the easing feels on a moving element.
  6. Type cubic-bezier(x1, y1, x2, y2) values directly into the input fields if you have a target spec.
  7. Use the velocity graph to understand how speed changes over time — peaks indicate acceleration moments.

When to use Cubic Bezier Editor

  • Designing custom easing for UI transitions and animations.
  • Matching a specific feel (bounce-like start, snappy end) to user expectations.
  • Replacing named easings with custom curves for more precise motion design.
  • Learning how Bezier curves control the velocity profile of CSS transitions.
  • Designing custom easing for UI transitions (modals, drawers, tooltips) and animations.
  • Matching a specific feel (bounce-like start, snappy end) to user expectations or brand motion guidelines.

Examples

Standard ease

Input: P1 (0.25, 0.1) P2 (0.25, 1.0)

Output: cubic-bezier(0.25, 0.1, 0.25, 1)

Material Design standard

Input: P1 (0.4, 0.0) P2 (0.2, 1.0)

Output: cubic-bezier(0.4, 0, 0.2, 1) — emphasized motion, balanced acceleration.

Snappy entrance with overshoot

Input: P1 (0.34, 1.56) P2 (0.64, 1.0)

Output: cubic-bezier(0.34, 1.56, 0.64, 1) — playful bounce on entrance.

Sharp ease-out (decelerate)

Input: P1 (0.0, 0.0) P2 (0.2, 1.0)

Output: cubic-bezier(0, 0, 0.2, 1) — fast start, smooth landing. Common for modals.

Tips

  • Most UI motion looks best with a slight overshoot at the end — pull P2's y above 1 for a soft bounce.
  • ease-out (0.0, 0.0, 0.58, 1.0) is the most natural feel for entrances; ease-in suits exits.
  • Avoid linear() for UI — it feels mechanical. Reserve it for progress bars and looping animations.
  • Keep transition durations short (150-300ms) for utility actions, longer (400-600ms) for storytelling motion.
  • If the curve goes flat in the middle, animation will appear to pause — usually undesirable. Keep the slope monotonically increasing for natural feel.
  • The Material Design 'standard' curve is cubic-bezier(0.4, 0.0, 0.2, 1) — a great starting point for emphasized motion.

Frequently Asked Questions

What is a cubic bezier easing curve?▾
A cubic bezier is a mathematical curve defined by 4 points. In CSS, the first and last points are fixed at (0,0) and (1,1). The two control points (P1 and P2) are what you adjust to shape how animation progress changes over time.
What is the CSS syntax for cubic-bezier?▾
cubic-bezier(x1, y1, x2, y2) where x1, y1, x2, y2 are the coordinates of the two control points, each between 0 and 1 for x, and any value for y (values outside 0-1 create overshoot effects).
Can I create a bounce effect with cubic-bezier?▾
Yes. Setting y values outside the 0-1 range creates overshoot, which visually resembles a spring or bounce. The Bezier editor allows y values up to about 1.5.
What is the difference between ease and ease-in-out?▾
ease (0.25, 0.1, 0.25, 1) starts fast then slows. ease-in-out (0.42, 0, 0.58, 1) starts slow, speeds up, then slows again — a more balanced curve.
Can I enter a cubic-bezier value manually?▾
Yes. The coordinate inputs alongside the canvas let you type values directly, which updates the control points on the canvas.

Explore the category

Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview. CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS. CSS Grid Playground Prototype grid templates, gaps, and alignment with a responsive preview and CSS export. CSS Minifier Minify CSS by removing comments and whitespace CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. OG Tag Generator Generate Open Graph meta tags with preview-friendly fields and copy-ready output.
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

Glossary

Cubic Bezier curve
A parametric curve defined by 4 points: two anchor points and two control points. CSS uses cubic Beziers with anchors fixed at (0,0) and (1,1).
cubic-bezier() function
CSS timing function: cubic-bezier(x1, y1, x2, y2) where x1/y1/x2/y2 are the two control-point coordinates. Used in transition-timing-function and animation-timing-function.
Easing
The mathematical curve that maps animation progress (time) to output progress (value). Easing controls perceived speed and feel of motion.
Linear easing
cubic-bezier(0, 0, 1, 1) — constant speed throughout. Useful for progress bars and continuous loops; feels mechanical for UI.
Ease-in
Starts slowly and accelerates. CSS keyword maps to cubic-bezier(0.42, 0, 1, 1). Suits exit animations.
Ease-out
Starts quickly and decelerates. CSS keyword maps to cubic-bezier(0, 0, 0.58, 1). Suits entrance animations.
Overshoot
When y2 > 1 or y1 < 0, the curve passes outside the 0-1 range, producing a spring or bounce feel as the animated value briefly exceeds its target.
Velocity profile
The first derivative of the easing curve. Tall sections indicate acceleration; flat sections indicate constant speed; dips show deceleration.