cubic-bezier() Editor — Visual CSS Easing Function Designer
Design custom cubic-bezier() easing functions with two draggable control handles. Live animation preview, common presets (ease, back-out, etc.), and copy-ready CSS. 100% local.
Last updated:
CommentsAnimation preview (2s, looped)
Drag the two circular handles on the curve — the ball animates with the same timing function.
Presets
cubic-bezier(0.42, 0.00, 0.58, 1.00)
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);
Frequently Asked Questions
What are the four numbers in cubic-bezier()?
They're the coordinates of two control handles: (x1, y1) and (x2, y2). x is time (must be 0-1), y is progress and can go outside 0-1 to produce back / overshoot effects. The curve always starts at (0,0) and ends at (1,1).
Which bezier maps to 'ease-in-out'?
cubic-bezier(0.42, 0, 0.58, 1). All five CSS keywords (linear, ease, ease-in, ease-out, ease-in-out) are shorthand for specific bezier curves — the presets in this tool show the exact values.
Why can y go below 0 or above 1?
y is progress percent, not time. If y goes below 0 the animation goes backwards briefly (a 'wind-up' effect); if it goes above 1 the animation overshoots the target and springs back (a 'bounce' effect). Both are how you make transitions feel physical.
Try Next
Meta Tag Preview
Preview how your page will appear in Google search results and social share cards on Facebook, Twitter/X, and LinkedIn. Parses <title>, meta description, canonical, and full Open Graph / Twitter Card tags with diagnostics. 100% local.
Related Tools
URL Parser
Parse any URL into scheme, host, port, path, and query parameters — or build a URL from scratch with a form. Great for debugging redirect chains, tracking pixels, and OAuth flows. 100% local.
CIDR Calculator
Calculate IPv4 subnets from CIDR notation online. Get network address, broadcast, netmask, wildcard, usable host range, IP class, and binary representation. 100% local — nothing leaves your browser.
Color Converter
Convert colors between HEX, RGB, HSL, and HSV instantly with a live color preview and copy-ready CSS strings. Free, no signup, runs entirely in your browser.
User Agent Parser
Parse User-Agent strings to identify browser, engine, operating system, and device. Instantly see what your own browser sends.
HTTP Status Codes
Complete reference of HTTP status codes with meanings, use cases, and RFC citations. Search 60+ codes from 100 Continue to 511 Network Authentication Required.
cURL Converter
Convert cURL commands to Python (requests), JavaScript (fetch), Node.js, Go (net/http), PHP, or Java (HttpClient). Parses -H, -d, --data-urlencode, -F, -u, --json and more. 100% local.