CSS cubic-bezier easing editor

Tool powered by cubic-bezier.com on cubic-bezier.com.

Edit CSS easing curves on cubic-bezier.com: drag handles, preview motion, compare curves, and copy cubic-bezier() values for transitions and animations.

What is cubic-bezier.com?

cubic-bezier.com is a visual cubic bezier editor for the CSS `cubic-bezier()` timing function. Drag control points, preview how a CSS easing curve accelerates and decelerates, save presets, and copy values into `transition-timing-function` or `animation-timing-function` rules. This page links to the official editor alongside /easings and /animista. This site does not host the curve library or change export behavior.

What cubic-bezier.com offers

Visual tooling for CSS timing functions.

  1. Draggable control points: Adjust the cubic-bezier function visually instead of guessing four numbers.

  2. Live motion preview: Watch how each CSS easing curve behaves at different durations.

  3. Curve comparison: Evaluate multiple animation timing function options side by side.

  4. Copy-ready CSS output: Paste cubic-bezier values directly into stylesheets or design tokens.

  5. Shareable permalinks: Link to exact curve settings for reviews and handoff.

How to use cubic-bezier.com

From curve tuning to production CSS.

  1. Open the curve editor

    Drag handles on cubic-bezier.com 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.com 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.

  1. Front-end engineers: Ship precise cubic-bezier function values without iterative guesswork in DevTools alone.

  2. Product and interaction designers: Align on how a CSS easing curve should feel before implementation.

  3. Design system maintainers: Define animation timing function tokens with shareable references.

  4. Motion QA: Compare transition easing against spec during review.

Why open cubic-bezier.com

Official editor reference without replacing the publisher site.

  • Stable directory path

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

  • Near related dev-reference tools

    Continue to /easings or /animate-style 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.com 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 https://cubic-bezier.com/ in a new tab.

Frequently Asked Questions

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