Web design

Cubic-bezier easing

Drag the handles, watch the curve, copy the timing function.

Install for Chrome →All features

Tools → Generate → Cubic-bezier easing · 7-day free trial · Premium $9.99 / yr

Try it now·runs locally · nothing uploaded

Curve (drag handles)

Preview · CSS

transition-timing-function: ease-in-out;

The named CSS easings (ease / ease-in / ease-out / ease-in-out) are exact aliases for specific cubic-bezier values.

Want this and 50 more tools at one keyboard shortcut, with collections and persistence?Install free trial →

★ Premium

Built for the things AI can’t fake

This tool runs free, right here. The extension adds three things a web widget can’t:

Start 7-day trial→

★ Flagship

Playground

↗

JS / TS scratchpad — sandboxed and instrumented.

Paste real code, hit Run. Console + network monitor + watch expressions all in one panel.

·Real ES modules · top-level await
·URL imports — esm.sh & friends
·Live fetch monitor (every call)
·Watch expressions in your scope
·10s sandbox timeout · zero CORS pain

HTTP client

↗

Postman-style request runner.

Save collections, share variables, hit any API. Includes GraphQL with introspection, OpenAPI / cURL import.

·Bearer / Basic / API-key auth
·GraphQL · introspection
·OpenAPI 3.x · cURL import
·Copy as fetch / axios / Python

Realtime (WS + SSE)

↗

Stream-protocol tester — what Postman doesn’t do well.

WebSocket + Server-Sent Events with custom auth headers, auto-reconnect, JSON pretty-print.

·wss:// + ws:// + subprotocols
·SSE via fetch — Authorization works
·Auto-reconnect with backoff
·Send composer · ⌘ + Enter

What it does

CSS animations and transitions take a timing function. cubic-bezier() lets you specify any curve via two control points. The named ones (ease, ease-in-out, …) are just specific cubic-bezier values.

The generator gives you a draggable SVG plot — Y can go outside [0, 1] for springy / overshoot effects — and a 1.5s replay loop showing how the timing actually feels.

Why use VibeGear's cubic-bezier easing

✓Two draggable handles in an SVG plot
✓Y can exceed [0, 1] for spring / overshoot
✓8 presets (linear, ease family + springy / overshoot / anticipate)
✓Detects when your custom curve matches a CSS named easing — copies the named version
✓Live animated dot replays the curve

How to use it

1Tools → Generate → Cubic-bezier easing.
2Drag P1 / P2 or pick a preset.
3Copy CSS.

Related tools

CSS gradient generator

Build linear / radial gradients with draggable stops.

Box-shadow generator

Stack shadows for realistic depth — Material 3, soft elevation, glow.

★ Premium

One install. Every tool above.

7 days free, then VibeGear Premium is $9.99 / €9.99 per year. Everything runs locally.

Install & start trial →→