Cubic Bezier Generator
Design a CSS cubic-bezier() easing curve by dragging two handles, compare it in a live animation, and copy the CSS or Tailwind class. Free.
Your curve
ease
linear
CSS
.box {
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* or on its own */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Tailwind
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to CSS Loader Generator or CSS Effects Generator.
Free CSS Cubic Bezier Easing Generator
Drag the two handles to shape an easing curve, press Play to see it next to ease and linear, and copy the CSS. It gives developers a quick browser-based way to solve a focused cubic bezier generator task before moving the result into a project.
How to use it
Start from a preset or drag the blue handles. You can also use the arrow keys when a handle is selected. Press Play to compare the speed of your curve with the standard ones.
Common mistakes
- Trying to move a handle left of 0 or right of 1: time cannot go backwards, so x is kept between 0 and 1.
- Very large overshoot on layout properties: animate transform and opacity instead.
Frequently asked questions
What does cubic-bezier(0.25, 0.1, 0.25, 1) mean?
The four numbers are the two control points of the curve: (x1, y1) and (x2, y2). The curve starts at (0, 0) and ends at (1, 1). This one is the CSS keyword "ease".
Why can x only go from 0 to 1?
The x axis is time, and time cannot run backwards. y can go below 0 or above 1 to make an overshoot or a pull-back.
How do I use the result?
Use it in transition-timing-function or animation-timing-function, or copy the Tailwind class.
Is anything uploaded?
No. Everything runs in your browser.
How do I use this cubic bezier generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Frontend & Design
User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back