CSS Easing Curve Preview

Compare your custom easing with a graph and preview.

Enable JavaScript for interactive processing. You can read the instructions, limits, and FAQs below without it. Files are processed only in your browser.

CSS Easing Curve Preview User Guide

Adjust CSS cubic-bezier control points and compare the timing against linear easing.

How to use

  1. Enter two control points and a duration.
  2. Play once or compare static positions with the slider.
  3. Copy the CSS curve and check it on your page.

Formats and limits

  • All four coordinates must be 0–1 and duration 0.1–5 seconds; overshoot and steps are not supported.
  • The preview compares timing; it does not guarantee site performance or rendering of every property.
  • Calculation stays in your browser and is cleared when you leave.

Output

A copyable cubic-bezier CSS string.

Frequently asked questions

Can I preview an overshoot?

No. The four control point coordinates are limited to 0–1.

The file name and content are only processed in your browser and are not transmitted to the server. The original file will not be overwritten. Please export the required results before leaving the tool.