What Is a CSS Cubic Bezier Curve?

A cubic bezier curve defines how a CSS animation or transition progresses over time. Instead of moving at a constant speed, you can make elements ease in slowly, accelerate quickly, or even overshoot and bounce back.

Technical definition: The CSS cubic-bezier(x1, y1, x2, y2) function takes four values that control two points on a curve. These points determine the acceleration and deceleration of your animation — the shape of the curve is the shape of your motion.

Why Use a Visual Editor?

Writing cubic-bezier values by hand is like painting with coordinates — technically possible but incredibly frustrating. A visual editor lets you:

Visual Feedback

See the curve shape as you drag control points and preview the actual animation before copying the code

Side-by-Side Comparison

Compare your curve with linear motion to understand the difference in animation behavior

Preset Library

Start from 29 built-in presets and fine-tune from there instead of starting from scratch

Real-Time Testing

Test different speeds and see how your curve affects multiple CSS properties simultaneously

How to Use

Shape Your Curve

Drag the two control point handles on the canvas to shape your easing curve. The indigo handle (P1) controls the start of the animation, while the amber handle (P2) controls the end.

Pro tip: You can also type exact values into the four numeric inputs below the canvas. The X values are restricted to 0–1, while Y values can go from -0.5 to 1.5 for overshoot effects.

Use Presets

Choose from 29 built-in presets organized by family. The CSS group includes the five standard keywords (linear, ease, ease-in, ease-out, ease-in-out). The Penner families (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) each offer three variants: In, Out, and InOut.

Preview Your Animation

Watch the animated ball move according to your curve in real-time. Enable Compare to see a second ball moving at linear speed alongside yours — this makes it easy to understand how your curve differs from constant motion.

The multi-property preview shows how your easing looks applied to Position, Scale, Rotate, and Opacity simultaneously. Adjust the Duration slider to test different speeds.

Copy the Code

Click the Copy button to grab the complete CSS code including both transition-timing-function and animation-timing-function. You can also click the cubic-bezier value text directly for a quick copy.

Features

Interactive Bezier Canvas

An SVG-based canvas displays your cubic bezier curve with a coordinate grid, axis labels, and a diagonal linear reference line.

Two draggable control points
Real-time coordinate display
Visual grid and axis labels

29 Easing Presets

Start from any of 29 presets organized into 9 groups: the 5 CSS standard easings plus 24 Penner easing functions across 8 families.

CSS standard easings (5)
Penner families (24 variants)
Mini curve thumbnails

Race Comparison

Compare your custom curve against linear easing with a side-by-side ball race animation.

Side-by-side comparison
Visual speed differences
Instant understanding

Multi-Property Preview

See how your easing curve affects four different CSS properties at once: Position, Scale, Rotate, and Opacity.

Position (horizontal movement)
Scale (size change)
Rotate & Opacity effects

Overshoot Support

Y values can extend beyond the standard 0–1 range (from -0.5 to 1.5), allowing you to create curves that overshoot their target and bounce back.

Range: -0.5 to 1.5
Bounce-back effects
Natural-feeling animations

Adjustable Duration

Test your easing at different speeds with the duration slider, ranging from 200ms for snappy micro-interactions to 3 seconds for slow, dramatic transitions.

200ms to 3000ms range
Real-time speed testing
Perfect timing selection

Frequently Asked Questions

What is cubic-bezier in CSS?

cubic-bezier(x1, y1, x2, y2) is a CSS function that defines a custom timing curve for transitions and animations. The four values control two handle points that shape how the animation accelerates and decelerates over its duration.

What do the four values mean?

The values represent two control points: P1 (x1, y1) and P2 (x2, y2). The X values represent time (0 = start, 1 = end) and must stay between 0 and 1. The Y values represent progress and can go outside the 0–1 range for overshoot effects.

Remember: X = time (0–1 only), Y = progress (-0.5 to 1.5 for overshoot)

What are Penner easing functions?

Robert Penner's easing equations are a standard set of mathematical curves widely used in animation. Each family (Sine, Quad, Cubic, etc.) has three variants:

In — slow start, fast end
Out — fast start, slow end
InOut — slow start and end, fast middle

This editor provides cubic-bezier approximations of these curves.

Can Y values go below 0 or above 1?

Yes. Y values below 0 make the animation temporarily go backward, while values above 1 make it overshoot the target. This creates bounce and spring-like effects. The Back easing family uses this for its characteristic overshoot.

Y < 0

Backward Motion

Animation goes backward temporarily
Creates anticipation effect

Y > 1

Overshoot Motion

Animation overshoots target
Creates bounce-back effect

What is the difference between ease and linear?

linear moves at a constant speed from start to finish. ease starts slow, speeds up in the middle, and slows down at the end — this feels more natural to the human eye.

Best practice: Use the Compare feature to see the difference clearly and understand how easing affects perceived motion.

How do I use the generated code?

Copy the CSS output and apply it to your transitions or animations:

CSS Implementation Example

.element {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.element {
  animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}