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