CSS Cubic-Bezier Curve Generator
Color
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
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.