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.

Cubic Bezier Editor | DevTools Surf

DevTools Surf

Example: Cubic Bezier Editor

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

ease-in-out

Output

ease-in-out · cubic-bezier(0.42, 0, 0.58, 1)

/* CSS transition */
.element {
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

/* CSS animation */
.element {
  animation: slide 300ms cubic-bezier(0.42, 0, 0.58, 1) both;
}

/* Framer Motion */
transition={{ duration: 0.30, ease: [0.42, 0, 0.58, 1] }}

/* GSAP (CustomEase plugin) */
CustomEase.create("custom", "M0,0 C0.42,0 0.58,1 1,1");
gsap.to(".element", { duration: 0.30, ease: "custom", x: 200 });

/* Control points: P1(0.42, 0) P2(0.58, 1) */

About Cubic Bezier Editor

Cubic Bezier Editor preview - Web / Frontend tool

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.

Related Web / Frontend Tools

Meta Tags / OG Previewer Tailwind → CSS HTML → React JSX HTML → Markdown SVG → React Component CSS Unit Converter robots.txt Validator Sitemap XML Validator