UtilityBaseDeveloper Tools
Cubic Bezier Generator
Design a CSS easing curve by dragging the control points, preview the motion, and copy the value.
Updated July 14, 2026
How to use the cubic bezier generator
- 1Drag the two handles to shape the curve, or type exact x/y values.
- 2Try a preset as a starting point.
- 3Watch the preview move with your easing.
- 4Copy the cubic-bezier() value into your CSS.
Common uses
- Fine-tuning a CSS transition or animation
- Creating a custom bounce or overshoot effect
- Matching a specific motion feel in a design
- Learning how easing curves work
Frequently asked questions
What is a cubic-bezier timing function?
It's a way to describe how a CSS animation accelerates and decelerates. The curve runs from (0,0) to (1,1), horizontal is time, vertical is progress, and two control points bend it. A straight line is linear; an S-curve eases in and out.
How do I make a bounce or overshoot effect?
Drag a control handle's vertical value above 1 or below 0. That makes the animation go past its end value and settle back, which is how 'back' and bounce-style easings work. The overshoot preset shows an example.
Where do I use the value?
Paste it into any CSS transition-timing-function or animation-timing-function, for example, transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1). It works anywhere a timing function is accepted.
About this tool
The cubic-bezier generator is a visual editor for CSS easing curves. Drag the two control handles to shape how an animation speeds up and slows down, or type exact values, and watch a live preview move with your timing function. Presets cover the standard curves (ease, ease-in-out, linear) plus an overshoot. Pull a handle above 1 or below 0 to make animations overshoot and settle, the basis of bounce and back effects. Copy the cubic-bezier() value straight into any CSS transition or animation. Everything runs in your browser.
Like most tools on UtilityBase, the cubic bezier generator runs entirely in your browser. Nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more developer tools here.
Was this tool helpful?
Related tools
CSS Gradient Generator
Build a linear or radial CSS gradient visually and copy the ready-to-paste code.
Developer Tools
CSS Box Shadow Generator
Design a box-shadow visually with sliders and copy the CSS instantly.
Developer Tools
Flexbox Generator
Set flexbox properties visually with a live preview and copy the CSS.
Developer Tools
Glassmorphism Generator
Design a frosted-glass card with live preview and copy the CSS.
Developer Tools
What Is My IP
Your public IP, and exactly what it reveals, location, ISP, timezone.
Developer Tools
Regex Tester
Test regular expressions live with match highlighting, groups, and a cheat sheet.
Developer Tools