Handytool
Developerუფასოახორციელდება ადგილობრივად

Cubic-bezier editor

Visually design CSS cubic-bezier easing curves — drag the handles, preview the motion, and copy the CSS.

CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Preview
Preset

Drag the lime handles or use the sliders to tune the curve.

Cubic-bezier editor შესახებ

Handytool's cubic-bezier editor lets you craft CSS easing curves the way they're meant to be designed — by dragging the two control points until the motion feels right. Start from a familiar preset (ease, linear, ease-in-out) and tweak from there, or freely move the handles to invent your own. A live ball animation plays back the curve so you can feel the timing before pasting cubic-bezier(...) into your transition.

Cubic-bezier editor მახასიათებელი

  • 01

    Drag the curve, see the motion

    Two draggable handles control the start and end of the bezier. The accompanying ball animation plays the curve at the duration you choose, so you can preview overshoot and ease-out feel without leaving the page.

  • 02

    All the standard presets

    Start from CSS's built-in ease, linear, ease-in, ease-out, and ease-in-out — then tweak. The preset switches back to "custom" automatically when you move a handle.

  • 03

    Copy CSS with one click

    The cubic-bezier() value updates live with two-decimal precision, ready to drop into transition-timing-function or animation-timing-function.

Cubic-bezier editor ხშირი კითხვები

Why can the Y values go above 1 or below 0?
Bezier control points outside the 0–1 range produce overshoot and undershoot effects — the curve goes past its endpoint before settling. This is how "bouncy" easing curves are made; the X axis still has to stay in 0–1.
How do I use the output?
Copy the cubic-bezier(...) string and paste it into any CSS transition-timing-function or animation-timing-function value. It works in every modern browser.
Is the preview accurate to what CSS will do?
Yes — the preview animates a ball from 0 to 100% using the same cubic bezier formula browsers use for transitions. The duration slider lets you feel slow vs fast curves before committing.
What does ease-in-out actually mean?
Ease-in-out starts slow, speeds up in the middle, and slows down again at the end — the cubic-bezier(0.42, 0, 0.58, 1) curve. It's the default for most polished UI motion because it mirrors how real physical objects accelerate and decelerate.

დაკავშირებული ინსტრუმენტები

Developer →

სხვა ინსტრუმენტების გამოკვლევა

ყველა ინსტრუმენტი →