Visual cubic-bezier Generator for CSS Easing
This cubic-bezier generator lets you craft custom CSS easing curves by sight instead of by guesswork. Drag two control points, watch the curve change in real time, and copy the exact cubic-bezier() value for your transitions and animations.
It is built for front-end developers, UI designers, and anyone fine-tuning motion who is tired of typing four numbers blind. Start from one of 29 presets, then nudge the handles until your ease-in, ease-out, or bounce feels exactly right.
How to Use the Editor
Shape your curve
Drag the two control point handles on the canvas to bend the easing curve. Handle P1 shapes the start of the motion and handle P2 shapes the end. Their coordinates appear as you drag.
Type exact values
Prefer precision? Type the four numbers into the inputs below the canvas. X values are kept between 0 and 1, while Y values may range from -0.5 to 1.5 for overshoot effects.
Start from a preset
Click any of the 29 presets to apply it instantly, then keep tweaking. The CSS standards (linear, ease, ease-in, ease-out, ease-in-out) and the eight Penner families are all one click away.
Preview the motion
Watch the animated ball move with your curve. Turn on Compare to race it against linear motion, and drag the Duration slider to test speeds from 200ms to 3 seconds.
Copy the CSS
Press Copy to grab both transition-timing-function and animation-timing-function. You can also click the cubic-bezier value itself for a quick copy.
Features
Interactive Bezier Canvas
An SVG canvas with a coordinate grid, axis labels, and a diagonal linear reference line. Drag the P1 and P2 control points to shape the curve, with live coordinates shown as you move.
29 Easing Presets
The 5 CSS standard easings plus 24 Penner functions across 8 families (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back), each shown with a mini curve thumbnail.
Race Comparison
Run your custom curve next to linear easing in a side-by-side ball race, so you can immediately see where your motion feels fast, slow, or paused.
Multi-Property Preview
See one easing curve drive four CSS properties at once: Position, Scale, Rotate, and Opacity, so you can pick the right feel for your use case.
Overshoot Support
Y values can extend from -0.5 to 1.5, letting you build curves that overshoot and bounce back for lively, spring-like motion such as the Back family.
Numeric Inputs
Four input fields stay in perfect sync with the canvas, so you can type exact values or read back the numbers behind any dragged curve.
Adjustable Duration
Test your easing at any speed with a duration slider from 200ms for snappy micro-interactions up to 3 seconds for slow, dramatic transitions.
Copy-Ready CSS
Get clean output for both transition-timing-function and animation-timing-function, with one-click copy and a quick-copy on the value text.
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 numbers control two handle points that shape how the animation accelerates and decelerates over its duration.
What do the four cubic-bezier values mean?
They are two control points: P1 (x1, y1) and P2 (x2, y2). The X values represent time, where 0 is the start and 1 is the end, and must stay between 0 and 1. The Y values represent progress and may go outside the 0 to 1 range for overshoot.
How do I make a bounce or overshoot easing curve?
Set a Y value below 0 or above 1. A value below 0 makes the motion briefly go backward, and a value above 1 makes it overshoot the target before settling, which creates a bounce or spring feel. The Back preset family is built on this trick. In this editor Y can range from -0.5 to 1.5.
What are Penner easing functions?
Robert Penner's easing equations are a standard set of motion curves widely used in animation. Each family (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) comes in three variants: In for a slow start, Out for a slow end, and InOut for both. This editor provides cubic-bezier approximations of those curves as presets.
What is the difference between cubic-bezier and ease-in-out?
ease-in-out is just a named keyword for one specific cubic-bezier curve (0.42, 0, 0.58, 1) that starts and ends slowly. cubic-bezier() is the general function that lets you define any curve you want, including ease-in-out and countless others the keywords cannot express. Use Compare to see how a custom curve differs from linear.
How do I use the generated code?
Copy the output and apply the value to your transition or animation, for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); or animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);. The editor outputs both the transition and animation timing-function properties so you can drop either one in.
No comments yet. Be the first to comment!