CSS Cubic-Bezier Curve Generator
An interactive editor for the `cubic-bezier(x1, y1, x2, y2)` CSS timing function. Drag the two control handles on the curve, or type coordinates directly. Y values can go outside [0, 1] for overshoot or anticipation effects. A preview block animates back and forth using your curve so you can feel the motion at a chosen duration. Presets cover the named CSS keywords (ease, ease-in/out) plus useful custom curves.
Presets
Preview animation
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);Use with transition-timing-function or animation-timing-function.
How to use
- Drag the blue and red handles to shape the curve.
- Or pick a preset (ease, ease-in-out, overshoot…).
- Press Play to feel the motion at the chosen duration, then copy the CSS.
Frequently asked questions
- Why can Y values go above 1 or below 0?
- Overshoot ('bouncy') and anticipation ('wind-up') effects need Y outside the [0, 1] range. CSS allows it — the animated value can briefly exceed the target before settling.
- X values outside [0, 1]?
- CSS restricts X1 and X2 to [0, 1] so the curve is a function of time. The slider clamps for X but allows Y > 1 / < 0 for overshoot.
- How is this different from spring physics?
- Cubic-bezier is a deterministic curve over fixed time. Springs (`animation-timing-function: linear(...)` or JS) model real physics — different mental model, similar feel for simple cases.
- Where do I use this in CSS?
- `transition-timing-function: cubic-bezier(...)` for transitions, or `animation-timing-function:` for keyframes. Tailwind: `ease-[cubic-bezier(...)]`.
Related tools
CSS Animation Generator
Build a CSS animation visually — pick a preset, tweak duration/easing/iteration, see the preview, and copy the generated keyframes.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Border Radius Generator
Drag corners independently, try elliptical radii, copy the CSS — with chat-bubble, pill, blob, and tab presets.
CSS Triangle Generator
Generate pure-CSS triangles (8 directions) using border or clip-path — copy the rule, drop it in.