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.
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