Skip to content
Marvin's Toolbox.

Search tools

Type to filter all tools

CSS Easing Previewer

Preview CSS easing functions on a live animation. Drag the handles of a cubic-bezier curve or pick a preset, compare easings side by side, tune the duration, and copy the resulting cubic-bezier() value.

Everything runs locally in your browser. Your data never leaves your device.

Curve

Drag the two colored handles on the plot, or focus one and nudge it with the arrow keys. Hold Shift for larger steps. The x values stay between 0 and 1, the y values may overshoot for bounce style curves.

Preview

600 ms
Ease

Pin the current easing to run several curves side by side on parallel tracks.

CSS output

Timing function
cubic-bezier(0.25, 0.1, 0.25, 1)
Transitionanimates transform
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1)
linear() approximation16 sampled stops
linear(0, 0.05, 0.152, 0.295, 0.445, 0.576, 0.683, 0.767, 0.834, 0.885, 0.925, 0.954, 0.976, 0.99, 0.998, 1)
Keywordthis curve is a built-in
ease

About the CSS Easing Previewer

This tool lets you design and preview CSS easing functions on a real animation. Drag the two control points of a cubic bezier curve, nudge them with the arrow keys or type the four values, and a box moves, scales or fades with exactly that timing. The plot shows how progress maps to time, so you can read the acceleration before you ever run it.

Pick a preset to start from, including the five CSS keywords and popular curves like the Material motion set, then copy the result as a cubic-bezier() value, a full transition line or a linear() approximation.

What you can do

  • Edit a cubic-bezier curve by dragging its control handles.
  • Preview an easing on a live move, scale or fade animation.
  • Compare several easings side by side on parallel tracks.
  • Copy the cubic-bezier() value or a ready transition line.
  • Convert a cubic bezier to a CSS linear() approximation.
  • Paste an existing cubic-bezier() value or keyword to inspect it.
  • Start from presets like ease-in-out, Material standard or swift out.

How to use the CSS Easing Previewer

  1. 1Shape the curve by dragging the handles, typing the four values or picking a preset. You can also paste an easing string.
  2. 2Choose the preview animation and set the duration, then press Replay to watch it run.
  3. 3Pin curves you want to keep and compare them on parallel tracks.
  4. 4Copy the output you need, the bezier value, the transition line or the linear() version.

How a cubic bezier easing works

A CSS easing curve maps time to progress. The x axis is time and always runs from 0 to 1, which is why the two x values must stay in that range. The y axis is progress and may leave the range, a y above 1 overshoots the target and a y below 0 pulls back before starting, which is how back and bounce style curves work.

The preview animations use the exact cubic-bezier() value shown in the output, so what you see on the tracks is what your CSS will do.

The linear() approximation

Some engines and tooling prefer the newer CSS linear() function, which describes an easing as a series of progress stops. The tool samples your curve at 16 evenly spaced times and emits them as a linear() value. It is an approximation, but a close one for typical UI curves.

Reduced motion

If your system asks for reduced motion, the preview stays still and only plays when you press Replay. The curve plot always shows the easing without any movement.

Related tools

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Checksum Validator

Verify a checksum online: drop a file, paste the expected checksum and see instantly whether they match. The hash type is detected from the checksum itself, covering MD5, SHA-1, SHA-256, SHA-512, BLAKE3, CRC-32 and more, and sha256sum lines or whole checksum files can be pasted as-is.

devsecurity

Chmod Calculator

Convert Unix file permissions between checkboxes, octal like 755 and symbolic notation like rwxr-xr-x, all kept in sync as you edit any of them. Covers setuid, setgid and the sticky bit, and shows the matching chmod command ready to copy.

devcalculator

Clipboard Inspector

See what your clipboard really holds. One press lists every format on it, from plain text and HTML to Excel tables and images, each with its type, size and a preview. Pasting works too, and can reveal even more formats.

dev

Code Formatter

Format code in JavaScript, TypeScript, JSON, JSON5, HTML, Vue, CSS, SCSS, LESS, Markdown, YAML, GraphQL, XML and SQL. Pick tabs or spaces, set the indent width, and format the input in place with one click.

devtext

Color Contrast Checker

Check two colors against the WCAG contrast rules. Type or pick a text and a background color, read the contrast ratio, see which AA and AAA checks pass, preview real text at the sizes WCAG distinguishes, and get suggested fixes when a check fails.

devcolor