CSSキュービックベジェジェネレーター
Drag the control points to create custom CSS easing functions. Preview animation and copy the code.
CSS Code
What Is Cubic Bezier?
CSS cubic-bezier() defines a custom timing function for CSS transitions and animations. The four numbers control two control points of a Bézier curve, allowing fine-tuned easing from ease-in to bounce-like effects.
What do the values mean?
The values (x1, y1, x2, y2) define two control points. X values must be between 0 and 1 (time), while Y values can exceed that range for overshoot/bounce effects.
How It Works
- Drag the control points: Move the two control point handles on the curve canvas to shape the timing function visually.
- Preview the animation: A demo element animates using your curve so you can see the feel — ease-in, ease-out, bounce, spring, etc.
- Fine-tune with values: Enter precise P1 and P2 coordinates (x1, y1, x2, y2) between 0 and 1 for exact control.
- Copy the CSS: Copy the
cubic-bezier()CSS function value to paste into yourtransitionoranimation-timing-functionproperty.
Why Use Cubic Bezier Editor?
CSS animations and transitions use timing functions to control the speed curve of movement. The built-in keywords (ease, ease-in, linear) cover basic cases, but custom cubic-bezier curves allow you to create spring-like overshoots, snappy accelerations, and smooth decelerations that feel polished. UI animation quality is a major factor in perceived app quality — Google Material Design, Apple HIG, and major design systems all specify custom timing curves. This visual editor makes it intuitive to find the right feel without manual trial-and-error in your stylesheet.
Common Curves
- ease —
cubic-bezier(0.25, 0.1, 0.25, 1)— default CSS ease - ease-in —
cubic-bezier(0.42, 0, 1, 1)— starts slow - ease-out —
cubic-bezier(0, 0, 0.58, 1)— ends slow - Material Design —
cubic-bezier(0.4, 0, 0.2, 1)— standard motion