CSS Cubic Bezier
CSSVisual cubic-bezier animation curve generator with presets and SVG preview
Drag the two control points and watch an SVG preview animate along the resulting curve, then copy the exact `cubic-bezier()` value once the easing feels right, instead of guessing coordinates and reloading a page to check. It also accepts a preset name like `ease-in-out` or a common named curve as a starting point, and parses a raw `cubic-bezier(x1,y1,x2,y2)` string you already have to visualize what it actually looks like. Per the CSS spec, the two x-coordinates are constrained to 0-1, but the y-coordinates are allowed outside that range, which is exactly what produces a bounce or overshoot effect. Everything runs client-side, with output formatted to strip unnecessary trailing zeros before you paste it into a stylesheet.
How to use CSS Cubic Bezier
- 1.Drag the two control points on the curve to visually shape an easing function, then copy the generated `cubic-bezier()` value.
- 2.Pick a preset like ease-in-out or a Material Design curve as a starting point, then fine-tune it to match your animation's feel.
- 3.Watch the SVG preview animate with your curve applied so you can judge the actual motion before pasting the CSS into your stylesheet.
Frequently asked questions
Use via API, SDK, or MCP
Installnpm install @utilix-tech/sdkUsageimport { css } from '@utilix-tech/sdk'
const params = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 }
const points = css.getCurvePoints(params)
console.log(css.toCssValue(params))
// cubic-bezier(0.25, 0.1, 0.25, 1)Runs locally · no API key · no rate limits · Node.js SDK docs →