CSS Cubic Bezier Easing Generator
NEWCraft CSS cubic-bezier easing curves by dragging control points and watch the easing play live, then copy the timing-function.
Drag the control points
Presets
Animation preview
CSS
How to use Cubic Bezier Generator
- Drag the blue and pink control points on the curve, or type x1, y1, x2, y2 values into the inputs.
- Click a preset such as ease-in-out or ease-out-back to load a common or overshoot easing curve.
- Watch the dot animate with your easing, press Play to replay it, then click Copy CSS to grab the cubic-bezier rule.
What is Cubic Bezier Generator?
The Cubic Bezier Generator is an interactive editor for CSS easing curves. Drag the two control points on the unit-square curve to shape how an animation accelerates and decelerates, then read the exact cubic-bezier() values back in the four numeric inputs — or type values directly to move the handles.
Control-point Y values can go beyond 0 and 1, so you can build overshoot and anticipation easings like back and bounce effects. A built-in animation preview moves a dot across the track using your curve as the transition-timing-function, replaying automatically whenever you change a value or press Play.
All computation happens in your browser. When the curve feels right, copy the ready-to-use timing-function line into your CSS.
FAQ
- What does cubic-bezier() do in CSS?
- cubic-bezier() defines a custom easing curve for transitions and animations using two control points (x1, y1, x2, y2). It controls the speed of the animation over time, letting you create effects beyond the built-in ease, ease-in, and ease-out keywords.
- Why can the Y values go below 0 or above 1?
- X values are clamped to 0–1 because time can't run backward, but Y values may extend past the 0–1 range to create overshoot and anticipation. This is how 'back' and 'bounce' easings briefly move past or before the target before settling.
- How do I use the generated curve?
- Copy the cubic-bezier() value into a transition or animation declaration, for example: transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);. The generator also outputs a ready transition-timing-function line you can paste directly.
Related tools
- Clip Path Generator
- CSS Gradient Generator
- Box Shadow Generator
- Color Palette Generator
- Keyframes Animation Generator
- CSS Transform Generator
People also use
- CSS Transform Generator🗄️ Developer Tools
Build CSS transforms visually — translate, scale, rotate, skew plus 3D rotateX/Y/Z and perspective. Live preview on a grid and copy the CSS, in-browser.
- Keyframes Animation Generator🗄️ Developer Tools
Build CSS @keyframes animations — fade, slide, bounce, pulse, spin, flip, zoom — tune duration, easing, delay and loop, preview live and copy the CSS.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
Last updated: