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
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
Cubic Bezier / Easing Generator runs entirely in your browser on DevTools — no signup, no upload.
What this tool does not do
- Cubic Bezier / Easing Generator is a free in-browser utility, not a hosted API, and keeps no server-side history.
How to use this tool
Using Cubic Bezier / Easing Generator
Open Cubic Bezier / Easing Generator, enter or paste your input, and copy the result.
Related guides
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
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.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
CSS Spring Physics Generator
Generate natural CSS spring animations from stiffness, damping, mass, and velocity. Analytical damped-harmonic solution with settle-time estimation and cubic-bezier approximation.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles