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.
Related Tools
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.
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. Includes a live color preview and copy-ready CSS strings.
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.
HTML Minifier
Minify HTML by removing comments, collapsing whitespace, and stripping optional attribute quotes and void-element slashes. Reports byte savings. Preserves IE conditional comments and preformatted <pre> / <textarea> / <script> / <style> content. 100% local.