Cubic Bezier Generator
Drag two control points to shape a CSS cubic-bezier() easing curve, preview the motion, and copy the timing function — all in your browser.
The Cubic Bezier Generator runs entirely in your browser. The curve you drag, the animation preview, and the generated cubic-bezier() CSS never leave your device and nothing is uploaded to ArrayKit.
Open the CSS Formatter
About Cubic Bezier Generator
The Cubic Bezier Generator lets you shape a CSS easing curve by dragging its two control points over a live plot, then copies the exact cubic-bezier(x1, y1, x2, y2) timing function for your transition or animation. Start from named presets like ease, ease-in-out, or a bouncy ease-out-back, then fine-tune the handles with the mouse or arrow keys. An animated dot plays your curve in real time so you can feel the acceleration before you paste it. It is built for front-end developers and designers tuning motion for a transition-timing-function or animation-timing-function without guessing at numbers. Everything renders on your device — the curve, the preview, and the generated CSS never leave your browser.
Features
- Drag two control points over a live curve to shape the easing
- Named presets: linear, ease, ease-in, ease-out, ease-in-out, and back curves
- Animated dot and scale/opacity demo play the curve in real time
- Copies the exact cubic-bezier() value and a ready transition-timing-function rule
- Nudge each handle with arrow keys for pixel-precise tuning
- Overshoot handles let you build bouncy ease-back curves with y past 1
- X values clamp into the CSS-required 0 to 1 range automatically
- Recognises and labels the current curve when it matches a standard preset
How to use the Cubic Bezier Generator
- Pick a preset like ease-in-out as a starting point
- Drag either control point to reshape the curve, or nudge it with arrow keys
- Watch the animated preview to feel the acceleration you built
- Copy the cubic-bezier() value or the full transition-timing-function rule
- Paste it into your CSS transition or animation shorthand
Example
Input
control point 1: 0.34, 1.56
control point 2: 0.64, 1
Output
.card {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
An ease-out-back curve overshoots past 1 for a subtle bounce.
Common errors & troubleshooting
- The browser ignores my cubic-bezier() and falls back to linear. — Both x values must be within 0 to 1. This tool clamps them for you, but a hand-typed x1 or x2 outside that range makes the whole value invalid.
- The animation looks stiff at the start and end. — Pull each handle further from its endpoint. Handles close to (0,0) and (1,1) barely bend the curve, so the motion stays near-linear.
- I want a bounce but the y value snaps back. — Drag a control point above the top of the plot so its y goes past 1 (or below 0). Only x is constrained; y overshoot is what creates anticipation and bounce.
- My preset stopped being recognised after I dragged a handle. — Any change makes the curve custom, so the preset label disappears. Re-click the preset chip to snap back to its exact values.
Frequently asked questions
- What do the four numbers in cubic-bezier() mean?
- They are the x and y coordinates of two control points: cubic-bezier(x1, y1, x2, y2). The curve's start and end are fixed at (0,0) and (1,1), and these two handles bend the path between them to set how the animation accelerates.
- Why must the x values stay between 0 and 1?
- In CSS the x axis is animation progress over time, which only moves forward. Keeping x1 and x2 in 0 to 1 guarantees the curve represents a single value at each moment. y can go outside that range to create overshoot or anticipation.
- How do I make a bouncy or overshoot easing?
- Give a control point a y greater than 1 or less than 0. For example cubic-bezier(0.34, 1.56, 0.64, 1) overshoots past the end before settling, which reads as a gentle bounce. Drag a handle above or below the plot to do this.
- What is the difference between ease and ease-in-out?
- ease is cubic-bezier(0.25, 0.1, 0.25, 1) and starts a touch faster than ease-in-out, which is cubic-bezier(0.42, 0, 0.58, 1) and is symmetric. ease-in-out ramps up and slows down evenly, while ease front-loads the motion slightly.
- Can I use this value for animation-timing-function too?
- Yes. A cubic-bezier() works anywhere CSS accepts an easing function, including transition-timing-function, animation-timing-function, and the timing slot of the transition and animation shorthands.
- Does dragging the curve send anything to a server?
- No. The editor, the animated preview, and the generated CSS are all computed in your browser with plain JavaScript. Nothing about your curve is uploaded to ArrayKit.
Related tools
- CSS Grid Generator — Build CSS grid layouts visually and copy grid-template-columns, rows and gap.
- CSS Clamp Calculator — Calculate a fluid CSS clamp() value from min and max sizes and viewport widths.
- CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
- CSS Unit Converter — Convert between px, rem, em, pt and % live with a configurable root font size.
- Tailwind Color Generator — Generate a full 50-950 Tailwind color scale from one brand color, with config-ready output.
- Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
All ArrayKit tools