Yes, y1 and y2 can be negative or greater than one in a CSS cubic-bezier() easing curve, and the CSS Cubic Bezier Generator accepts both. Only the x coordinates (x1 and x2) are restricted to the closed range 0 to 1 because they describe how far along the input timeline the curve reaches each control point. The y coordinates describe output progress, and CSS permits them to leave that frame so designers can produce anticipation, where the animated value dips below its starting position before settling, or overshoot, where the value swings past its resting point before coming back. The generator constrains the x inputs to the valid CSS range and accepts finite y values from minus ten through ten, then runs a pure browser-side calculation to validate those limits before serializing the result to three decimal places. Output numbers are only rounded at serialization time, so the underlying calculation retains full JavaScript numeric precision.
Why y1 and y2 Can Leave the 0–1 Range
A CSS cubic-bezier() easing is described by four numbers: x1, y1, x2, and y2. The curve always begins at the point (0, 0) and ends at (1, 1); the four editable numbers define the two intermediate control points that pull the curve between those anchors. The x axis is the fraction of elapsed time, normalized so 0 is the moment the transition starts and 1 is the moment it finishes. The y axis is the fraction of progress the animated property has actually made at that moment. Because x is a time fraction, CSS treats x1 or x2 outside 0–1 as invalid: a control point earlier than the start of the animation, or after the end of it, cannot map to a real moment in the transition.
The y axis is different. Progress above 1 means the animated value has gone past its target (overshoot), and progress below 0 means the animated value has moved in the opposite direction before coming back (anticipation). Both are useful for expressive motion: a button that briefly squishes before popping out, a panel that overshoots its final position before settling, or a notification badge that bounces into place. The CSS Easing Functions Level 1 specification explicitly permits these effects; it is the W3C rules for x, not y, that decide validity.
Coordinate Validity at a Glance
| Coordinate | Meaning | Required range | Out-of-range effect |
|---|---|---|---|
| x1 | Input-time position of the first control point | 0 to 1 (inclusive) | The cubic-bezier() declaration is invalid and ignored by the browser |
| x2 | Input-time position of the second control point | 0 to 1 (inclusive) | The cubic-bezier() declaration is invalid and ignored by the browser |
| y1 | Output progress at the first control point | Any finite number (the generator accepts −10 to 10) | Produces anticipation (below 0) or overshoot (above 1) |
| y2 | Output progress at the second control point | Any finite number (the generator accepts −10 to 10) | Produces anticipation (below 0) or overshoot (above 1) |
The generator's interface constrains x inputs to the closed 0–1 interval and uses the pure calculation independently to confirm that every output is valid before the CSS declaration is shown. If you type an invalid x value, the four-number declaration is suppressed so it cannot be copied into a stylesheet as a no-op.
How the Generator Handles Overshoot and Anticipation
The square chart plots the parametric curve from the fixed start (0, 0) to the fixed end (1, 1). Standard curves sit comfortably inside the square. When you deliberately push a y value toward the edges of the generator's accepted range, the parametric curve can extend outside the visible square, because the chart keeps a stable zero-to-one frame so ordinary curves remain visually comparable. The sample table and the animated preview continue to use the actual computed easing, so the y excursion is preserved rather than clipped to the chart. This is important: a curve that looks "outside the box" in the chart is the curve the browser will actually run. If you are unsure how much overshoot a given coordinate pair produces, trust the numeric samples at input times 0, 0.25, 0.5, 0.75, and 1, and watch the moving preview circle.
The sample table answers a question the chart cannot easily answer on its own: at a given fraction of elapsed time, how far has the animated value already progressed? For each input x in {0, 0.25, 0.5, 0.75, 1}, the solver finds the curve parameter t whose x coordinate equals that input, then evaluates y. It first attempts bounded Newton iterations and falls back to bisection when needed, which avoids the common mistake of treating t itself as elapsed time even when x1 and x2 make those values different. The Run preview button toggles a circle between two horizontal positions with a 900 millisecond transform transition using the exact generated easing string, so you can click repeatedly to compare forward and reverse motion before committing.
How to Design a Custom Overshoot Curve With the CSS Cubic Bezier Generator
- Open the CSS Cubic Bezier Generator and choose whether to start from a standard easing preset (ease, ease-in, ease-out, ease-in-out, linear) or to enter custom x1, y1, x2, and y2 values directly. The keyword buttons load their standardized cubic-bezier equivalents from CSS Easing Functions Level 1.
- To produce overshoot, keep x1 between 0 and 1 and raise y1 toward 1.2–1.6 for a subtle overshoot, or up to 2 for a strong bounce. The larger y1 becomes, the further the animated value will travel past its resting position before settling.
- To produce anticipation, lower y2 below 0 (for example, −0.3 to −0.6) so that, late in the transition, the curve briefly points in the opposite direction. Combine with an overshoot y1 if you want a spring-like feel.
- Inspect the square chart, the five numeric samples (at x = 0, 0.25, 0.5, 0.75, 1), and the moving Run preview circle. The table is the most reliable readout: a y value above 1 at any input means the animated value will exceed its target at that point in time.
- When the timing matches the intended feel, click Copy CSS to copy the complete transition-timing-function declaration (including its semicolon) to the clipboard. The visible declaration always exposes all four numbers, even when you started from a keyword, so it is easy to record, compare, and modify.
- Paste the declaration into the real element, set the animated property (transform, opacity, and similar), choose a duration in milliseconds, and respect any reduced-motion preferences. The generator intentionally does not output duration, delay, iteration count, or full shorthand, so those decisions remain with you.
Standard Keyword Mappings for Comparison
Choosing a keyword button loads the same four control coordinates that every standards-compliant browser uses for that easing name. The visible declaration exposes all four numbers so the choice is auditable rather than hidden behind a keyword.
| CSS keyword | x1, y1, x2, y2 (per CSS Easing Functions Level 1) | Notes on y values |
|---|---|---|
| linear | 0, 0, 1, 1 | No overshoot, no anticipation |
| ease | 0.25, 0.1, 0.25, 1 | Mild acceleration, no overshoot |
| ease-in | 0.42, 0, 1, 1 | Slow start, no overshoot |
| ease-out | 0, 0, 0.58, 1 | Fast start, no overshoot |
| ease-in-out | 0.42, 0, 0.58, 1 | Symmetric S-curve, no overshoot |
All five keywords land entirely inside the y = 0 to 1 frame. To leave that frame, you must edit the coordinates yourself or paste a known overshoot preset such as cubic-bezier(0.34, 1.56, 0.64, 1), which is a popular "back" easing that briefly exceeds 1 before settling. The generator's calculation reproduces that declaration exactly.
Testing, Accessibility, and Reduced Motion
A cubic-bezier() value that the CSS parser accepts is not automatically a good choice in a real interface. Large overshoots can push an element outside its container, briefly expose content that was meant to remain clipped, or make a focused control appear to reverse direction in a way that disorients keyboard or pointer users. The generator deliberately shows the full computed easing in the moving preview so that you can judge those effects before copying the declaration.
The preview uses a 900 millisecond transform transition between two positions to demonstrate timing. A real component can feel different when distance, duration, property, rendering cost, input device, or surrounding motion changes, so test the declaration in its final interface with the actual distance and duration you plan to ship. Keep important state changes understandable without motion, avoid rapid oscillation, and check focus and pointer behavior while the element is transitioning. Where animation is not essential, respect prefers-reduced-motion; the generator outputs only transition-timing-function, so the reduced-motion behavior is yours to control.
Cross-check the curve against the published specification when something looks off. W3C CSS Easing Functions Level 1 is the primary source for the syntax, the x validity rule, and the keyword mappings, and MDN documents cubic-bezier() behavior with browser-oriented examples. The generator's pure calculation independently validates those constraints so that copied declarations match the standards rather than depending on a remembered mapping.
If you're weighing options, Remove the Transition From a Generated CSS Toggle Switch covers this in detail.