← All toolsFree — no signup

Cubic Bezier Generator

Drag four control values to build a cubic-bezier easing function with an SVG curve preview.

P1 X: 0.25

P1 Y: 0.10

P2 X: 0.25

P2 Y: 1.00

Curve Preview

Animation Preview

CSS Output

transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);

Loading tool…

How it works

Set the four control values

See the easing curve drawn live

Copy the cubic-bezier CSS

We build calculators, estimators, and AI-powered tools that convert visitors into leads.