Cubic-Bezier Easing Generator
Shape CSS easing curves by dragging handles, with a live preview.
Craft custom CSS animation easing curves by dragging two control handles on an interactive graph, then watch a real element animate on your exact curve before you copy the cubic-bezier() value. Pull handles past the edges for bouncy overshoot easings, or start from handy presets like ease-in-out and ease-out-back. Runs fully in your browser — nothing is uploaded.
How to use Cubic-Bezier Easing Generator
Start from a preset
Pick ease, ease-in-out, ease-out-back or another curve as a starting point — or begin from the default and shape your own.
Drag the handles
Move the blue (start) and pink (end) control points on the graph. The horizontal axis is time (0→1) and the vertical axis is the output value (the eased progress).
Make it bouncy
Pull a handle above the top or below the bottom edge so the value overshoots and settles — the classic “back” / anticipate easing effect.
Preview the motion
Hit Replay and adjust the duration to watch a real dot and progress bar animate on your exact curve, so timing feels right before you ship.
Copy the value
Click Copy value for the cubic-bezier() string, or Copy CSS for a full transition rule, then paste it into your stylesheet.
Frequently asked questions
What is a cubic-bezier easing curve?
It defines how an animation's speed changes over time. In CSS, cubic-bezier(x1, y1, x2, y2) sets two control points between a fixed start (0,0) and end (1,1). The horizontal axis is time and the vertical axis is the output value (the eased progress), so the curve's shape controls acceleration and deceleration.
Why are the x values limited to 0–1 but y is not?
The CSS spec requires the x (time) coordinates of both control points to stay within 0 and 1 so the function is well-defined over the duration. The y (value) coordinates can go below 0 or above 1, which is exactly what produces overshoot and anticipation effects like ease-out-back.
How do I make a bouncy / overshoot animation?
Drag the end handle above the top edge (y > 1) so the value shoots past its target and settles back — or the start handle below the bottom (y < 0) to pull back first. The preview shows the bounce so you can dial in the amount.
Where do I use the value?
Use it as the timing function of a transition or animation, e.g. transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); or as the animation-timing-function in an @keyframes animation.
What's the difference between this and ease-in-out?
ease, ease-in, ease-out and ease-in-out are just named presets that map to specific cubic-bezier values. This tool lets you go beyond them and craft a custom curve — tighter, snappier or bouncier — that those five keywords can't express.
Is anything uploaded?
No. The curve, preview and CSS are all generated in your browser. Nothing you create is sent to or stored on a server.
Related tools — Design · CSS generators
- CSS Box Shadow Generator — Design layered CSS box-shadows with a live preview.
- CSS Border Radius Generator — Round corners and craft organic blob shapes in CSS.
- Glassmorphism & Neumorphism Generator — Generate frosted-glass and soft-UI CSS effects.
- CSS clamp() / Fluid Typography Generator — Build responsive clamp() sizes that scale without media queries.
- CSS Flexbox / Grid Playground Generator — Visually build Flexbox & CSS Grid layouts and copy the code.
- Mesh Gradient Generator — Create trendy multi-colour mesh backgrounds as pure CSS.
- Blob & Wave SVG Generator — Generate organic blob shapes & hero-section waves as SVG.