Control points
0.4, 0, 0.2, 1
Output
cubic-bezier(0.4, 0, 0.2, 1)
Design Tools
CSS Cubic Bezier — Easing Curve Debugger
Visually edit the four cubic-bezier control points, preview the easing curve, and copy a timing function for transitions and animations—useful for button motion and page transitions.
CSSAnimationEasing
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Cubic Bezier
Visually edit the four cubic-bezier control points, preview the easing curve, and copy a timing function for transitions and animations—useful for button motion and page transitions.
最终 CSS 转场代码
调整控制点或时长后，预览动画和复制代码会保持一致。
Use cases
- Tune button motion timing
- Build page-transition easing
- Match a motion curve from a design file
How to use
- Drag or enter the four control points
- Preview the curve and animation
- Copy the cubic-bezier value
Example input and output
FAQ
Can I use it directly in transition?
Yes. Paste cubic-bezier(...) into transition-timing-function or animation-timing-function.
What range do the control points use?
x is usually 0–1; y can go outside 0–1 for overshoot. Confirm the feel in the preview.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Gradient Generator
CSS Gradient Generator — Linear, Radial, Conic
Visually build linear, radial, and conic CSS gradients. Adjust angle and stop positions, add multiple stops, and copy CSS for backgrounds, buttons, and brand transitions.
CSS Gradient Background
CSS Clamp Generator
CSS Clamp Generator — Fluid Responsive Sizes
From min/max viewport widths and a target size range, compute a clamp() formula for fluid font sizes, spacing, and other lengths that scale with the viewport.
CSS clamp Responsive