Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function, visualise the curve and copy the transition-timing-function CSS
Control points
P1 — first control point
P2 — second control point
Easing curve
Preview animation
CSS
.element {
transition: transform 0.6s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}Examples
Spring-like bounce (easeOutBack)
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);The y1 value of 1.56 overshoots the final value before settling, giving a satisfying spring feel to elements entering the screen.
Snappy ease-in-out
transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);Starts and ends slowly but accelerates sharply through the middle — ideal for UI elements that need to feel precise and intentional.
Details
CSS cubic-bezier() lets you define any easing curve for transitions and animations using two control points: P1 (x1, y1) and P2 (x2, y2). The x values control timing (must be 0–1), while y values can exceed that range to create overshoot effects. Everything runs entirely in your browser — no data ever leaves your machine.
About this tool
The cubic-bezier() CSS function defines a timing curve for transitions and animations using four numbers: x1, y1 (control point P1) and x2, y2 (control point P2). The start anchor is always (0, 0) and the end anchor is always (1, 1).
x values must stay in the range 0–1 (they represent time), while y values can go below 0 or above 1 to produce undershoot and overshoot effects — the secret behind spring and bounce easings like easeOutBack.
This generator renders the Bézier curve live in SVG, ships a set of common presets, lets you preview the animation on a real element before copying, and outputs a ready-to-paste CSS rule — all running locally in your browser with no server round-trips.
How to use
Choose a preset and customise it
Click a preset chip (ease, ease-in-out, easeOutBack, etc.) or move the P1 and P2 sliders — the SVG curve preview updates instantly.
Preview the animation
Click Play animation to watch a sample element animate with your chosen easing so you can feel it before using it in production.
Copy and use the CSS
Click Copy CSS to copy the full transition-timing-function rule and paste it directly into your stylesheet.
Common CSS easing presets
| Preset name | cubic-bezier() value |
|---|---|
| ease (default) | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
| easeOutBack | cubic-bezier(0.34, 1.56, 0.64, 1) |
Frequently asked questions
Related tools
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Flexbox Playground
Visually configure a CSS flexbox container — set direction, alignment, wrap and gap, see a live preview, and copy production-ready CSS.
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
Barcode Generator
Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.
CSV to JSON Converter
Paste CSV data and convert it to pretty-printed JSON instantly — supports custom delimiters, header row toggling, and value trimming.
HTML to Markdown Converter
Paste HTML and get clean Markdown. Configurable heading style, bullet marker, and code block style — all processed locally in your browser.