About Cubic Bezier Editor

Generate CSS cubic-bezier timing functions from control points. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Animators fine-tuning easing curves for UI transitions
• Frontend developers matching design system motion specifications
• UX engineers creating custom easing for micro-interactions
• Game UI developers crafting smooth menu transition effects

Tips

• Drag control points to see real-time animation preview
• Match common presets like ease-in-out before customizing
• Export the cubic-bezier value directly into your CSS file

Fun Facts

• Bezier curves were independently developed by Pierre Bezier at Renault and Paul de Casteljau at Citroen in the early 1960s for designing automobile body shapes.
• CSS cubic-bezier() is restricted to exactly two control points, while general Bezier curves can have any number — this constraint keeps browser animation calculations efficient.
• Chrome DevTools has had a built-in cubic-bezier editor since 2014, but many developers still don't know they can click on timing function values to visually edit them.

FAQ

What is a cubic bezier?

A 4-point curve (2 endpoints, 2 control points) that defines the speed over time of an animation. The standard CSS timing function format.

What's the difference from ease, ease-in, ease-out?

Those are keyword presets. cubic-bezier() gives you precise control. The tool has each preset's cubic-bezier equivalent — useful for tweaking from a starting point.

Can I preview with my actual element?

Yes — paste your element or use the preview box. The motion curve plays so you can feel the timing.

What makes a natural bezier?

Real-world motion starts and ends slower (ease-in-out style). Steps functions (step-start, step-end) work for discrete transitions like a blinking cursor.