Cubic Bezier Easing Maker

design

Interactive CSS cubic-bezier curve editor with draggable control handles, physics presets, and live motion sandbox.

100% Client-Side — Processed privately & locally in your browser.

Standard & Physics Easing Presets

CSS Transition Timing Function

cubic-bezier(0.25, 0.1, 0.25, 1)

P1: (0.25, 0.1) · P2: (0.25, 1)

Interactive Bezier CurveDrag handles or use sliders

Handle P1

X1:0.25

Y1:0.1

Handle P2

X2:0.25

Y2:1

Motion Sandbox

Duration1s

Linear Translation (Move X)

Scale / Pop

POP

Opacity Fade

FADE

GSAP / Framer Motion snippet: CustomEase.create("custom", "0.25, 0.1, 0.25, 1")

No. All processing for this tool occurs directly within your web browser using Web APIs and WebAssembly. Your data never leaves your computer.

Once loaded, most utilities remain functional even if your connection drops. DevtUtils is designed to be lightweight and resilient.

Explore other handy tools in design

Convert between HEX, RGB, and HSL color formats.

Generate QR codes for URLs or text (works offline).

Check WCAG compliance for text and background color combinations.