Named easing keywords like ease-in-out only get you so far. When you want a custom animation feel — a slight overshoot, a snappy start, a slow settle — you need a custom cubic-bezier() curve, and guessing the four numbers by hand is painful.
What Is the Cubic Bezier Generator?
A visual editor for CSS cubic-bezier() timing functions. Drag the two control points on the curve, watch the generated CSS update live, and preview the exact easing on an animated element.
How to Use It
- Open the tool at /tools/cubic-bezier-generator.
- Drag the green and orange control points, or type exact x/y values.
- Click a preset (ease, linear, ease-in-out, back, etc.) as a starting point.
- Click “Preview animation” to see the curve applied to a real CSS transition.
- Copy the generated
cubic-bezier(...)value into your stylesheet.
Key Features
- Draggable control points on a live curve diagram.
- Six common presets including the CSS-overshoot “back” style curve.
- Live animation preview using your exact generated timing function.
- One-click copy of the final CSS value.
When to Use This Tool
- Designing a custom animation feel that the standard easing keywords can’t express.
- Matching a designer’s motion spec exported as bezier control points.
- Learning how bezier easing curves actually map to motion by dragging and watching the preview.
Try It Now
Open Cubic Bezier Generator directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.