Cubic Bezier

Drag the two control points of a cubic Bezier curve to design custom CSS easing. A sample animates beside the curve so you see the motion the curve produces. Copy as <code>cubic-bezier(x1, y1, x2, y2)</code> — drop into any <code>transition-timing-function</code> or <code>animation-timing-function</code>.

Why custom easing matters

Default easing is fine for 90% of UI. The 10% where it matters — your motion is the brand. Linear’s animations feel different from Vercel’s, which feel different from Notion’s. The curves are the difference.

Recipes for common feelings

Each gives a different perceived motion, even at the same duration. Try them all in the live preview.

Common workflows

Define motion tokens. Pick 3-5 curves for a design system — a “fast”, “medium”, “decisive”. Use everywhere; consistency is what makes motion feel intentional.

Match a video reference. Designer hands you a video. Tweak the curve until it lines up. Save the values to the design system.

Tune a hero animation. Long animations suffer from default easing — too linear. A custom cubic-bezier gives the deliberate feel that hero sections need.

Limits of cubic-bezier

Cubic-bezier is two control points. For motion that needs more shape (multi-step, oscillation, spring physics), reach for linear() (CSS Easing Level 2, modern browsers), or animation libraries (GSAP, Framer Motion) for true spring math. Cubic-bezier is the simplest tool that handles most cases — start here.

Last updated: 2025-01-15