What is Easing Editor?

Design cubic-bezier, spring, and linear() easing curves.

Is Easing Editor free?

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does Easing Editor upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Who built Easing Editor?

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What is Easing Editor?

Design cubic-bezier, spring, and linear() easing curves.

Is Easing Editor free?

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does Easing Editor upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Who built Easing Editor?

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What easing types can I design?

Cubic-bezier (CSS transition-timing-function), spring (for JavaScript animation libraries that accept stiffness/damping/mass), and linear() (the new CSS easing function for multi-stop custom curves).

How do I use the output in CSS?

Copy the generated value directly into a transition or animation-timing-function property. Example: transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1).

Can I preview the easing on a real element?

Yes. The editor shows a live animation preview on a box that plays back every time you change a handle — no guessing required.

What spring easing output does it give?

For Framer Motion: { type: 'spring', stiffness: X, damping: Y, mass: Z }. For GSAP: { ease: 'elastic.out(X, Y)' }. Output adapts to the library you select.

Easing Editor

cubic-bezier and linear() curves with draggable handles and a live ball preview

cubic-bezier(0.25, 0.10, 0.25, 1.00)

Preview0.6s

custom

linear

cubic-bezier(0.25, 0.10, 0.25, 1.00)

Controls

Presets

Control point P1 X0.25

Control point P1 Y0.10

Control point P2 X0.25

Control point P2 Y1.00

Duration0.6s

Output format

CSS

cubic-bezier(0.25, 0.10, 0.25, 1.00)

About this tool

What easing types can I design?: Cubic-bezier (CSS transition-timing-function), spring (for JavaScript animation libraries that accept stiffness/damping/mass), and linear() (the new CSS easing function for multi-stop custom curves).
How do I use the output in CSS?: Copy the generated value directly into a transition or animation-timing-function property. Example: transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1).
Can I preview the easing on a real element?: Yes. The editor shows a live animation preview on a box that plays back every time you change a handle — no guessing required.
What spring easing output does it give?: For Framer Motion: { type: 'spring', stiffness: X, damping: Y, mass: Z }. For GSAP: { ease: 'elastic.out(X, Y)' }. Output adapts to the library you select.

About

Drag the blue and red dots on the cubic-bezier canvas to shape the curve. Y values can overshoot 0..1 for back / bounce effects.

linear() mode unlocks multi-stop easing — great for spring motion in modern browsers without JS.

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →

View all tools →