Built-in toolFree · No signup

CSS Cubic Bezier Builder

Build custom cubic-bezier easing curves by dragging control points on a canvas. Preview the animation in real time and choose from 10 built-in presets. Copy the CSS timing function with one click.

Presets

P1 (purple)

P2 (blue)

Animation Preview

1 second · auto-loops

Current value

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

Tips

→Drag the purple (P1) and blue (P2) handles on the canvas

→Y values beyond 0–1 create overshoot / bounce effects

→X values must stay in 0–1 (CSS spec requirement)

→Use presets as starting points, then fine-tune

CSS Output

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

How to use

Start from a preset

Pick Linear, Ease, Ease In, Out Back, or any of the 10 presets as a starting point.

Drag the handles

Click and drag the purple P1 and blue P2 circles on the canvas to shape your curve.

Preview the animation

Hit Play to see a ball animate across the screen using your exact timing function.

Copy the CSS

Copy the transition-timing-function declaration and paste it into your stylesheet.

More CSS animation tools

From our directory of 30+ CSS tools.

Browse all →

animations

Animista

Browse, customise, and export ready-made CSS animations on demand.

#animation#keyframes#transitions

animations

Keyframes.app

Visual CSS animation timeline editor with shadow, color, and easing tools.

#animation#keyframes#timeline

animations

CSS Loaders

600+ pure CSS loading spinners and animations, copy in one click.

#loaders#spinners#animation

animations

Whirl CSS

100+ pure CSS loading animations with a searchable, copyable library.

#loaders#animation#spinners

animations

Magic Animations

CSS animation library with dramatic, attention-grabbing entrance effects.

#animation#library#effects

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →