CSS Easing Generator
Adjust cubic-bezier values and generate transition CSS with a curve preview.
About This Tool
Tune x1, y1, x2, and y2 values directly to create a cubic-bezier easing curve.
Use it to compare motion for hover states, modals, cards, and other interface transitions.
Curve preview
Easing
cubic-bezier(0.25, 0.1, 0.25, 1)
Output
How to Use
- 1
Enter the values you need or paste your text into the input area.
- 2
Adjust any options, units, or settings for your exact use case.
- 3
Review the result and copy it into your document, workflow, or next task.
Features
Instant Results
Outputs update directly in the browser as you enter values.
Browser-Based Processing
Your inputs are handled locally and are not uploaded for calculation.
Simple Inputs
Clear fields and readable outputs keep repeat tasks fast.
Free to Use
Use the tool immediately with no sign-up or installation.
Common use cases
- ›Create transition timing functions for a design system.
- ›Preview animation curves while adjusting cubic-bezier values.
- ›Copy both CSS code and the cubic-bezier value.