CSS cubic-bezier easing editor

Tool powered by Cubic Bezier on Cubic Bezier.

Drag control points, preview motion, compare easing curves, and copy cubic-bezier() values for CSS transitions and animations.

What is Cubic Bezier?

Drag control points, preview motion, compare easing curves, and copy cubic-bezier() values for CSS transitions and animations.

What Cubic Bezier offers

Visual tooling for CSS timing functions.

  • Draggable control points

    Adjust the cubic-bezier function visually instead of guessing four numbers.

  • Live motion preview

    Watch how each CSS easing curve behaves at different durations.

  • Curve comparison

    Evaluate multiple animation timing function options side by side.

  • Copy-ready CSS output

    Paste cubic-bezier values directly into stylesheets or design tokens.

  • Shareable permalinks

    Link to exact curve settings for reviews and handoff.

How to use Cubic Bezier

From curve tuning to production CSS.

  1. Open the curve editor

    Drag handles on Cubic Bezier until the preview matches your interaction intent.

  2. Test duration in context

    A cubic-bezier function feels different at 150ms versus 400ms—preview at realistic timings.

  3. Copy the cubic-bezier() value

    Paste into `transition-timing-function` or `animation-timing-function` in your CSS.

  4. Save presets for your design system

    Document a small token set—primary ease, entrance, exit—so products stay consistent.

  5. Open Cubic Bezier in a new tab if needed

    Sharing or library features may work better outside a restricted iframe.

Tips for better easing curves

Motion quality comes from restraint and context.
  • 01

    Map easing to interaction type

    Subtle transition easing for hovers; stronger curves for deliberate entrances.

  • 02

    Limit your token set

    Three to five CSS easing curve presets are usually enough for a product.

  • 03

    Compare near-linear curves

    Small handle changes affect perceived speed—compare near-linear versus strong ease before you commit.

  • 04

    Respect prefers-reduced-motion

    Shorten or disable non-essential animation when users request reduced motion.

  • 05

    Validate in real components

    Preview on the site is not a substitute for testing in your actual UI layout.

Who this is for

Teams polishing interaction timing.

  • Front-end engineers

    Ship precise cubic-bezier function values without iterative guesswork in DevTools alone.

  • Product and interaction designers

    Align on how a CSS easing curve should feel before implementation.

  • Design system maintainers

    Define animation timing function tokens with shareable references.

  • Motion QA

    Compare transition easing against spec during review.

Why open Cubic Bezier

Official editor reference without replacing the publisher site.

  • Stable directory path

    Link `/cubic-bezier` in specs; Hero attribution points to Cubic Bezier.

  • Near related dev-reference tools

    Continue to Easings or Animate.css for complementary motion references.

  • This site does not host curves

    Presets and UI update on the publisher site; this page links to it and documents how to use it.

Technical notes

Embed and CSS output boundaries.
Official source
The Cubic Bezier site runs in the editor area; output is standard `cubic-bezier()` CSS syntax.
Usage scope
Applies to CSS transitions and animations in modern browsers; test on your support matrix.
Third-party frame rules
If the frame is blank, open the official Cubic Bezier site in a new tab.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.