Presets

Click on a preset to view it, or drag the handles to create a custom curve.

What Is a Cubic Bezier Curve in CSS?

A cubic-bezier curve lets you customize the speed of your CSS animations. It defines how an animation progresses over time — whether it starts slow, speeds up, bounces, or eases in or out.

The cubic-bezier() function uses four numbers: x1, y1, x2, y2. These control points shape the animation curve between the fixed start (0, 0) and end (1, 1).

This page lets you edit a cubic-bezier curve and see how it changes the animation in real time. Explore how different values affect the motion of your elements!

Examples of Popular Bezier Curves

How the Cubic-Bezier Numbers Work

• x1 and x2 (Time): Control when things speed up or slow down. Must be between 0 and 1.
• y1 and y2 (Progress): Control how far along the animation is. These can go below 0 or above 1 to create bounces or elastic effects.

CSS Animation Tips for Better UX

• Use ease-in or ease-out curves to make animations feel natural.
• For a bouncy or playful motion, use y-values outside the 0–1 range.
• The bezier curve graph shows time (x-axis) vs. progress (y-axis).
• Start and end your curves gently to avoid sharp, jarring motion.

Try It Live

Use the curve editor above to tweak your own cubic-bezier() values and instantly preview how the animation changes.

Export to After Effects with One Click

Want to bring your easing into motion graphics or video work? You can generate After Effects (AE) expression code from any cubic-bezier curve you design here.

Simply choose from:

• Position
• Scale
• Rotation
• Opacity

Each option outputs a clean, copy-paste-ready AE expression that mimics the exact curve you're seeing in the preview. Your animation will ease smoothly between two keyframes with precision — no plugins needed.

Why Use AE Expression Export?

• 🎨 Apply custom easing that matches your web animations
• 💫 Create smooth, cinematic transitions without manual graph editing
• 🔁 Keep your motion design consistent across web, video, and UI
• ⚡ Save time with instantly usable expressions for any property

Just select your curve, open the Copy Options dropdown, and choose the After Effects property you want. Then paste it directly into AE — and boom, beautiful motion.