Dev
Cubic Bezier Generator
A cubic-bezier() generator for CSS transitions and animations. Pick a named preset — ease-in-out-back for a pop, bounce-ish for a spring, snappy for a responsive default, gentle for the Material curve — or drop into custom mode and set the four control points yourself. The output is the exact cubic-bezier() value plus a matching transition line with a plausible duration and property picked at random, so you can paste a working rule straight into your stylesheet. A custom curve uses x1 and x2 in the 0–1 range (CSS rejects values outside that on the x-axis) and y1, y2 in the wider -0.5 to 1.5 range so you can overshoot for spring effects. The generator clamps every value defensively, so an out-of-range or missing input still returns a legal function. Each preset comes with a short feel description telling you what the motion actually looks like in the browser, which is the piece that is hard to guess just from four numbers. Regenerate to shuffle the duration and property in the transition snippet without changing the curve itself.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Pick a named preset from the dropdown if you want a known-good curve, or choose custom to set your own control points.
- For custom mode, set x1 and x2 between 0 and 1 (time) and y1 and y2 between -0.5 and 1.5 (progress, may overshoot).
- Read the cubic-bezier() value and the matching transition snippet in the output.
- Copy the transition line straight into your CSS rule for the element you want to animate.
- Regenerate to shuffle the sample duration and property while keeping the curve — useful for testing the same curve across different transitions.
Use Cases
- •A frontend developer picking a modal-entrance curve that overshoots slightly for a modern SaaS onboarding screen
- •A designer prototyping button hover feedback and comparing snappy versus gentle without writing any code
- •A CSS learner exploring how y-values outside 0–1 create spring and pull-back effects
- •A design-system maintainer standardising three named curves (snappy, gentle, bounce-ish) across all components
- •A motion designer converting a Figma smart-animate curve into a legal CSS cubic-bezier for handoff to engineering
Tips
- →For UI motion under 200 ms, use snappy or a stock ease-out — springy curves need at least 350 ms for the overshoot to read.
- →Set y1 negative to make an element pull back slightly before moving forward — great for playful icon reveals.
- →The gentle preset (Material's standard curve) is a safe default when you cannot decide — it looks correct in almost every context.
- →Preview any custom curve at cubic-bezier.com or in DevTools; four numbers are hard to feel until you see them move.
- →Reuse two or three curves across your whole design system rather than picking a new one per component — consistency reads as polish.
FAQ
how do I make a css bounce effect with cubic-bezier
A single cubic-bezier can only overshoot once, not oscillate, so a true bounce needs @keyframes. The bounce-ish preset gets you the closest single-curve approximation — it springs past the target and settles back. For a real multi-bounce, chain keyframes at 60%, 80%, and 100%.
why are my y-values allowed to go above 1 but x-values are not
CSS requires x1 and x2 to be in the 0–1 range because they represent time, which must move forward. Y-values represent progress toward the target and can exceed 1 (overshoot) or drop below 0 (pull back) — that is exactly how spring and back-easing curves work.
What is the difference between ease-in-out and cubic-bezier(0.42, 0, 0.58, 1)?
Nothing — the keyword ease-in-out is an alias for that exact cubic-bezier. All the named CSS easing keywords (ease, ease-in, ease-out, ease-in-out, linear) map to specific bezier curves, and cubic-bezier() lets you pick anything in between.
which duration should I pair with a springy cubic-bezier
Springy curves need more time to breathe — usually 350–500 ms — so the overshoot reads as intentional rather than jittery. Snappy or gentle curves work well at 150–300 ms. If a spring feels too slow at 400 ms, lower the overshoot instead of shortening the duration.
Can I use cubic-bezier with framer-motion or GSAP?
Yes — both accept the same four control points, though the syntax differs. In framer-motion pass ease: [x1, y1, x2, y2]; in GSAP use CustomEase.create('name', 'M0,0 C x1,y1 x2,y2 1,1'). The values themselves are identical to what CSS uses.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.