Cubic Bézier Easing Generator

Design cubic-bezier() easing curves visually with a draggable handle, preview the motion live, and copy the CSS or JS value — nothing leaves your browser.

Curve Editor

Presets

Live Preview

Ball loops left → right every 2s with your curve.

Output CSS

cubic-bezier(0.42, 0, 0.58, 1)

Framer Motion

[0.42, 0, 0.58, 1]

Motion & Easing Guides

Get the easing curves and duration scales we use for UI motion — enter/exit, emphasis, and accessibility (prefers-reduced-motion) patterns.

No spam. Unsubscribe anytime.

Explore Related Tools

Discover more utility-driven tools designed to enhance your workflow and technical excellence.

Tailwind Color Palette Generator

Generate a complete Tailwind CSS shade scale (50–950) from any base color. Live preview, copy the config, or export as CSS variables.

CSS & Design

CSS Gradient Generator

Build linear and radial gradients with unlimited color stops, adjustable angles, and a live preview. Copy production-ready CSS instantly.

CSS & Design

CSS Box Shadow Generator

Create layered box shadows visually — offset, blur, spread, color, inset — with curated presets and copy-ready CSS output.

CSS & Design