Cubic Bezier Editor
Craft CSS easing curves visually.
How to use
- 1 Pick a preset to start from, or enter your own control points.
- 2 Adjust x1, y1, x2 and y2 and watch the curve update.
- 3 Keep both X values within 0 and 1; Y can overshoot.
- 4 Copy the generated cubic-bezier() value into your CSS.
About Cubic Bezier Editor
The Cubic Bezier Editor helps you design the easing curve behind a CSS transition or animation and copy it as a ready-to-paste cubic-bezier() timing function.
A cubic Bézier easing is defined by two control points; their four numbers — x1, y1, x2, y2 — shape how an animation accelerates and decelerates over its duration.
Adjust the four values and the curve redraws instantly in the preview, with time running left to right and progress bottom to top, so you can see at a glance whether your motion eases in, eases out, snaps, or gently overshoots.
Start from familiar presets such as ease, linear, ease-in, ease-out and ease-in-out, then tweak from there.
The editor enforces the CSS rule that both X coordinates stay within 0 and 1 while letting the Y values go below 0 or above 1, which is exactly what produces anticipation and overshoot effects.
When the points are valid it outputs a clean cubic-bezier(...) string rounded to three decimals, ready to drop into transition-timing-function or an animation.
Everything runs locally in your browser with no build step or upload, so it is a quick, private companion while you fine-tune motion in a stylesheet.
FAQ
Why can Y go outside 0–1 but X cannot?
CSS requires the control points’ X (time) to stay in 0–1 so the curve is a function of time, while Y (progress) may exceed that range to create overshoot or anticipation.
Where do I paste the result?
Use it as the value of transition-timing-function or animation-timing-function, e.g. transition: transform .3s cubic-bezier(0.25, 0.1, 0.25, 1).