CSS Easing Generator
Free online CSS easing generator. Drag the cubic-bezier control points on an interactive curve, choose from 18 presets, watch a looping ball preview and copy the timing function instantly.
What is an easing function in CSS?
An easing function controls how fast an animation or transition progresses over time. Instead of moving at a constant speed, an element can start slow, accelerate, overshoot and settle. In CSS you set it with the transition-timing-function or animation-timing-function property.
What do the four numbers in cubic-bezier() mean?
cubic-bezier(x1, y1, x2, y2) defines a curve by two control points. The first point shapes how the motion starts and the second how it ends. X represents time on a scale from 0 to 1, and Y represents progress, where 0 is the starting value and 1 the final value.
Why can Y go outside 0 to 1 while X cannot?
X is mapped to real time, so a value below 0 or above 1 would break causality and is forbidden by the spec. Y is free: values above 1 overshoot the target and values below 0 pull back first, which is how the Back presets create their bounce feel.
What is the difference between ease, ease-in and ease-out?
ease is the browser default with a gentle start and soft landing, ease-in starts slow and finishes fast, ease-out starts fast and decelerates, and ease-in-out combines both. This generator includes them plus sine, quad, cubic, quart, expo, back and material presets — 18 in total.
How does the ball preview work?
Two balls loop side by side for the duration you set. The upper ball always moves with a linear timing function as a reference, while the lower ball uses your curve. The growing and shrinking gap between them shows exactly what your easing changes.
Where do I paste the generated value?
Use it as the transition-timing-function or animation-timing-function value in your CSS, for example transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. The tool outputs the bare cubic-bezier(...) function, ready to drop into any rule.
Does the easing function affect animation performance?
The timing function itself is free — it only remaps progress over time. Performance depends on which properties you animate: transform and opacity are GPU-friendly, while animating layout properties like width or top causes expensive reflows regardless of easing.
Can I create a real bounce or elastic effect?
A single cubic-bezier can overshoot once, but it cannot produce the multiple bounces of a true bounce or elastic easing. For those, chain several keyframes in @keyframes, or use the Web Animations API — this tool is ideal for the single smooth overshoot that cubic-bezier handles.
Does anything I do here get uploaded?
No. The curve is drawn on a local canvas and the preview animation runs entirely in your browser. Nothing is transmitted to a server, so the generator also works offline once the page has loaded.
How to Use CSS Easing Generator
Sculpt CSS easing curves visually instead of guessing numbers. Drag the control points, compare your motion against a linear reference and copy the finished cubic-bezier in one click. Everything runs locally in your browser.
- Pick one of the 18 presets such as Ease Out, Expo Out or Back Out as a starting point.
- Drag the two handles on the curve: the X axis is time and must stay between 0 and 1, the Y axis is progress and may overshoot.
- Fine-tune the exact P1 and P2 coordinates with the number inputs if you need precision.
- Set the duration slider and watch the two looping balls — the hollow one is always linear, the solid one uses your curve.
- Copy the generated cubic-bezier value into transition-timing-function or animation-timing-function.
Push a Y handle above 1 for a confident overshoot, like cubic-bezier(0.34, 1.56, 0.64, 1) — it makes buttons and cards feel springy without any keyframes.
Related Tools
- CSS Gradient Generator Create stunning CSS gradients visually. Generate linear, radial & conic gradients with multiple color stops, custom angles and positions. Copy production-ready code instantly.
- CSS Loader Generator Free CSS loader generator: ten pure-CSS loading spinners with live size, speed, thickness and color controls, then copy ready-to-paste HTML and CSS code.
- Fancy Border Radius Generator Free online fancy border radius generator. Drag 8 handles or pick a blob preset to create organic CSS shapes and copy the border-radius code instantly.
- Color Converter Free online color converter. Convert HEX, RGB, HSL, HSV formats instantly with visual picker. 100% private, runs in your browser.
- Text Shadow Generator Free online text-shadow generator. Stack multiple shadow layers with offset, blur, color and opacity, try Neon, 3D, Retro and Glow presets, and copy the CSS instantly.
- CSS Clip Path Generator Free online CSS clip-path generator. Design polygon, circle, ellipse and inset shapes with draggable points, live preview and one-click CSS code copy.
- CSS Beautifier Format and beautify CSS code instantly. Convert minified CSS to readable, well-indented code with customizable options.
- CSS Minifier Free online CSS minifier. Instantly compress and optimize CSS code by removing whitespace, comments and unnecessary characters. Reduce file size for faster web performance.