Categories
Cubic Bezier Generator
Generate a CSS cubic-bezier() easing function from four control points and visualize the curve.
Overview
- Specify four control points (x1, y1, x2, y2) to generate a cubic-bezier() easing function for use in CSS transitions and animations.
- The generated curve is visualized as a graph, so you can adjust the acceleration and deceleration while seeing its shape.
- The generated value is in the form "cubic-bezier(x1, y1, x2, y2)" and can be used directly in transition-timing-function or animation-timing-function.
Usage
- Enter the control point values into the x1, y1, x2, y2 fields (x1 and x2 must be between 0 and 1).
- Click the "Generate" button.
- The easing curve graph and the generated cubic-bezier() value are displayed.
Example
Input
x1: 0.25 / y1: 0.1 / x2: 0.25 / y2: 1
Output
cubic-bezier(0.25, 0.1, 0.25, 1)
Use Cases
- Setting a custom easing curve for a CSS animation or transition
- Creating motion like a "bounce" or "overshoot" effect that the built-in ease keywords don't provide
- Reproducing an easing curve specified in a design mockup, by matching its shape visually
FAQ
Can I enter a value greater than 1 or a negative value for y1/y2?
Yes. The y-coordinate represents the degree of change rather than time, so it has no range restriction. Values greater than 1 or negative values produce an "overshoot" motion that passes the target value before settling back.
What happens if x1 or x2 is outside the 0-1 range?
It results in an error. The x-coordinate represents the progress of time, so a value outside 0-1 would make the curve non-monotonic over time, which is not a valid easing function under the CSS specification.
What values correspond to keywords like ease, ease-in, and ease-out?
ease corresponds to cubic-bezier(0.25, 0.1, 0.25, 1.0), ease-in to cubic-bezier(0.42, 0, 1.0, 1.0), ease-out to cubic-bezier(0, 0, 0.58, 1.0), and ease-in-out to cubic-bezier(0.42, 0, 0.58, 1.0).
Notes
- The generated value is only the function part (cubic-bezier(...)). Paste it into whichever property you need, such as transition-timing-function or animation-timing-function.
- The graph is sized to comfortably show control points roughly within -0.2 to 1.2. With large overshoot values, the curve may extend beyond the graph's visible area.
Related Tools
Generate linear-gradient or radial-gradient CSS from colors and positions.
Generate a CSS box-shadow by specifying offset, blur, and color.
Generate CSS Grid styles from column count, row count, and gap.