CSS Cubic-Bezier Curve Generator
Design custom CSS easing curves visually. Drag control points to build smooth ease-ins, ease-outs, or bouncy spring curves with real-time animation comparison.
Private by architecture:
All processing is 100% client-side memory. Your data never leaves this browser tab.
Interactive Coordinate Graph
P1 (Handle 1)
P2 (Handle 2)
Animation Comparison Race Track
Custom Curve cubic-bezier(0.25, 0.1, 0.25, 1)
Ease (CSS Default) cubic-bezier(0.25, 0.1, 0.25, 1)
Linear cubic-bezier(0, 0, 1, 1)
Generated CSS Output
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);About This Tool
The CSS Cubic-Bezier Curve Generator helps frontend developers and UI motion designers create, fine-tune, and compare custom CSS timing functions interactively.
Drag control points P1 and P2 on the SVG coordinate plane to craft smooth ease-ins, snappy snaps, or springy overshoot bounces. Test your curve in a side-by-side transition race track against standard CSS ease and linear timing.
Key Features
- Interactive SVG coordinate plane: Drag control points P1 and P2 with mouse or touch, or type precise numeric values directly into the coordinate inputs.
- Side-by-side animation race track: Compare your custom curve in real-time against standard CSS ease and linear animations with adjustable duration and loop controls.
- Spring and overshoot support: Y-axis coordinates allow values below 0.0 and above 1.0 to produce realistic elastic bounce and overshoot effects.
- Ready-to-use motion presets: One-click presets for Linear, Ease, Ease-In, Ease-Out, Ease-In-Out, Quads, and Back / Elastic curves.
- Copy-ready CSS rules: Exports transition-timing-function, animation-timing-function, and shorthand CSS declarations.
Frequently Asked Questions
Why are X coordinates restricted to values between 0.0 and 1.0?
In CSS timing functions, the horizontal X-axis represents time progression from 0% (start) to 100% (finish). Time cannot flow backwards in CSS transitions, so CSS specifications strictly restrict X1 and X2 to the range [0.0, 1.0].
Can Y coordinates be less than 0 or greater than 1?
Yes. The Y-axis represents the animated property value (e.g. opacity, scale, transform, or position). Setting Y above 1.0 creates an overshoot spring bounce, while setting Y below 0.0 creates an anticipatory rollback effect.
How do I use the generated cubic-bezier in my CSS stylesheet?
Copy the generated cubic-bezier declaration and set it as your transition-timing-function or within the shorthand transition property (e.g. transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)).
Does this tool send any telemetry or code to a remote server?
No. All bezier math calculations and DOM animations run 100% in local browser memory.
