Animation & Motion · Free generator

CSS Cubic Bezier Editor

Free · no sign-up Live preview · copy or download the CSS

Easing is the personality of motion. Shape a custom cubic-bezier with four sliders, replay a live ball to feel it, snap to classic presets — and copy the exact timing function.

Settings

the ball travels with your curve — replay to feel it

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS TransitionsWhere timing functions plug in.STEP 2 · 25 minCSS TransformsThe cheap properties worth easing.STEP 3 · 30 minCSS Animations & KeyframesCurves inside keyframe timelines.


  1. CSS Keyframes GeneratorAnimation & Motion
  2. CSS Hover Effects GeneratorAnimation & Motion
  3. CSS Button GeneratorTypography & Buttons
  4. CSS Box Shadow GeneratorShadows & Effects
  5. CSS Gradient GeneratorBackgrounds & Color


How it works


A cubic-bezier maps time (x, 0→1) to progress (y). The two control points bend that mapping: high early y = fast start, y beyond 1 = overshoot past the target and settle back, y below 0 = a wind-up before launch. Keyword easings are just named points on this space — ease is (.25,.1,.25,1).


Taste guide: UI responses feel best fast-out (big first-moment progress, gentle landing); overshoot suits playful bounces, badges, toys; linear suits only mechanical things like marquees and progress. X values must stay 0–1 (time can't reverse); Y is free to exceed the range — that freedom is where character lives.


Run the code — try it yourself
The card slides linearly — robotic. Give its transition the overshoot curve cubic-bezier(.68,-.55,.27,1.55) at .6s, then click it in the preview.


exercise.html — editable


Frequently asked questions
Why can y go below 0 or above 1 but x can't?
x is time — it only moves forward. y is progress, and over/undershooting progress is exactly what bounce and anticipation are.
Where do I use the copied function?
Anywhere a timing function fits: transition shorthand, animation shorthand, or their -timing-function longhands.
Same curve for entering and leaving?
Often no — snappy out, gentle in reads best. Declare different transitions on the base and active states.
Does a custom curve cost performance?
Zero — easing is math the browser evaluates per frame regardless of which curve you pick.


Keep going
Every polished product you admire has opinionated easing — motion is brand. Feel curves here until "fast-out, gentle-in" is instinct, then wire them into transitions and keyframe animations alike.
CSSmatic is a non-profit project, made by developers for developers.