Free Cubic Bezier Previewer
Pick or paste an easing to see its curve and motion, read its values, and copy it for CSS or apps.
What is a Cubic Bezier Previewer?
This cubic bezier previewer draws any CSS easing function as a curve of progress over time and runs a dot with it beside a linear one, so you can feel the motion as well as see its shape. It reads cubic-bezier(), the ease keywords, steps() and linear().
Every curve is evaluated the way the CSS Easing specification defines, so its values match what browsers do. The tool lists progress at each tenth of the duration, measures overshoot and pull-back, and writes the curve for CSS, the Web Animations API, Core Animation, SwiftUI, Android and Flutter.
Key Features
Curve and Motion
The curve with its control handles, and a dot moving with it.
Every CSS Easing
cubic-bezier(), keywords, steps() and linear() with stops.
Values Over Time
Progress at each tenth of the duration.
Platform Code
The same curve for CSS, iOS, SwiftUI, Android and Flutter.
Overshoot Check
How far a curve overshoots or pulls back, and near-miss keywords.
Perfect for everyone
- Front-end developers
- Motion designers
- Product designers and mobile developers
How to Use the Cubic Bezier Previewer
Choose a well-known curve or paste any easing value, even a whole declaration or four numbers from JavaScript. Adjust the four numbers to reshape a cubic-bezier, and the curve, the moving dot and the values update together, so each change is something you can see and feel.
Pick or Paste
Start from a curve, or paste an easing or a declaration.
Shape the Curve
Change x1, y1, x2 and y2 for a cubic-bezier.
Watch the Motion
Compare the dot with the linear one below it.
Copy the Code
Take the CSS or the curve for your platform.
Easings, Measured
Each row is an easing of the kind used in interface transitions, from Material Design’s standard curve to a bounce built with linear(). Each answer is this tool’s values, code or check, evaluated the way the CSS Easing specification defines.
“cubic-bezier(0.2, 0, 0, 1)”
“cubic-bezier(0.34, 1.56, 0.64, 1)”
“ease”
“steps(4, jump-end)”
“transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);”
“linear(0, 0.36 30%, 1 45%, 0.82 57%, 1 70%, 0.95 80%, 1)”
“cubic-bezier(0.25, 0.1, 0.26, 1)”
“[0.4, 0, 0.2, 1]”
“cubic-bezier(1.2, 0, 0.5, 1)”
“step-start”
CSS Easing Functions
An easing maps time to progress: given how far through the duration an animation is, it says how far along the change should be. CSS has three easing functions and a set of keywords that stand for common curves.
cubic-bezier(x1, y1, x2, y2)
A smooth curve set by two control points; x values are times from 0 to 1.
“Can y values go past 1?”
ease
cubic-bezier(0.25, 0.1, 0.25, 1), the CSS default for transitions.
“What is the default transition easing?”
ease-in
cubic-bezier(0.42, 0, 1, 1): slow start, fast finish.
“Which suits things leaving the screen?”
ease-out
cubic-bezier(0, 0, 0.58, 1): fast start, gentle stop.
“Which suits things arriving?”
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1): slow at both ends.
“Is ease-in-out symmetric?”
steps(n, position)
Jumps in n equal steps instead of moving smoothly.
“What is the default position?”
linear(stops)
Straight lines between points, for bounces and springs.
“Which function can draw a bounce?”
Reading the Four Numbers
A cubic-bezier has fixed ends at (0, 0) and (1, 1), and the four numbers place the two handles that bend the curve between them. Learning to read them lets you tell how a curve will feel before you see it drawn.
x1 and y1
The first handle shapes the start: low y1 means a slow start.
x2 and y2
The second handle shapes the end: y2 near 1 means a soft landing.
x Stays in 0–1
x values are moments in time, so they can’t go back or past the end.
y Past 1
A y above 1 overshoots the target before settling.
y Below 0
A y below 0 pulls back before moving forward.
The Four Step Positions
steps() splits the duration into equal parts and jumps between levels instead of gliding, which is how sprite sheets, typewriter effects and ticking clocks are animated. The second argument decides where the jumps fall, and the Values view shows each one tenth by tenth.
jump-end
The default, also written end: holds the start value for the first step and reaches 100% exactly at the end.
jump-start
Also written start: jumps on the very first frame, so 0% is never shown.
jump-none
Holds both 0% and 100% for a full step each, with one jump fewer than the step count.
jump-both
Jumps at both ends as well as between steps, so neither 0% nor 100% is held.
Choosing an Easing
Rules of thumb that make interface motion feel natural rather than mechanical, drawn from common practice in design systems. Watch the moving dot against the linear one as you try each, since motion is easier to judge than a curve.
Ease Out for Entrances
Elements arriving should slow down as they land.
Ease In for Exits
Elements leaving can speed up as they go.
Keep It Short
Most interface transitions sit around 150 to 300 ms.
Overshoot Sparingly
A little overshoot feels playful; a lot feels sloppy.
Respect Reduced Motion
Turn motion down when prefers-reduced-motion is set.
Building Curves With linear()
linear() draws straight lines between points you choose, so with enough points it can imitate bounces, springs and wobbles that a single cubic-bezier can’t. Browsers have supported it since 2023, and the check reports its range and where it crosses halfway.
Stops
Each entry is an output value with an optional input percentage, such as 0.82 57%.
Spread Inputs
Stops without a percentage are spaced evenly between their neighbours.
Generated Curves
Spring and bounce generators write long linear() values that paste straight in here.
The Same Curve on Every Platform
Native animation frameworks describe cubic Bézier curves with the same four numbers as CSS, so one curve can define motion on web, iOS and Android alike. The Code view writes each of these for the curve you’re looking at.
Core Animation
CAMediaTimingFunction(controlPoints:) takes x1, y1, x2 and y2 in the same order.
SwiftUI
.timingCurve() takes the four numbers and a duration in seconds.
Android
PathInterpolator takes them as floats; Compose’s CubicBezierEasing does too.
Flutter
The Cubic class is a Curve built from the same four numbers.
Easing Pitfalls
The mistakes that make motion feel wrong or make a value fail silently, since browsers ignore an invalid easing and fall back to the default.
x Outside 0–1
The whole value is invalid and the default is used.
Swapped Handles
Swapping the pairs turns ease-out into ease-in.
jump-start Surprises
The first step happens immediately, hiding the start.
linear() Support
Older browsers ignore linear(); give a cubic-bezier fallback.
Too Slow
Long durations with ease-in make interfaces feel laggy.
Where Easing Matters
Anywhere something moves, fades or resizes on screen, the easing decides whether it feels responsive or sluggish. The same duration can feel quick or slow depending on the curve alone, which is why design systems name their curves.
Menus and Drawers
Slide panels in with ease-out and out with ease-in.
Design Systems
Name a few curves and use them everywhere.
Sprite Animations
steps() for frame-by-frame animations.
Matching Apps
Use the same curve on web, iOS and Android.
Micro-Interactions
Overshoot on toggles and likes for a bit of life.