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

Next steps

Keep going. These tools open with your result loaded in.

Text Case Converter

Convert text into every case at once: title case in the APA, AP, Chicago, MLA, Bluebook, AMA and NYT styles, sentence case, upper, lower, camelCase, snake_case, kebab-case and more.

textconverter

Word & Character Counter

Count words, characters, sentences, paragraphs, lines and more as you type, with estimated reading and speaking time.

text

Dedupe Lines

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.

textdev

Find and Replace

Replace text in two modes: plain find and replace all, or regular expressions with flag controls and capture group references like $1.

textdev

Text Diff

Compare two texts and see every added, removed and changed line highlighted, side by side or inline, with the changed words marked within each line. Ignore case, whitespace or blank lines, read a summary of how much changed, and export the result as a unified diff.

textdev

UUID Decoder

Paste a UUID to see what it carries: version, variant, and for time-based versions the exact timestamp, clock sequence and node. Also shows the raw bytes, the 128-bit integer and the URN form.

devuuid

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

Number Base Converter

Convert numbers between binary, octal, decimal, hexadecimal and any base up to 36. Type into any field and the others update as you go. Handles huge integers without losing precision and accepts 0x, 0b and 0o prefixes.

devconvertercalculator

Scientific Notation Converter

Convert between scientific notation and full numbers as you type. Reads 1.23e5, 1.23 × 10^5 and plain numbers, shows the value written out, in normalized scientific notation and in engineering notation, and can round to any number of significant digits.

convertercalculator

About the CSS Easing Previewer Tool

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

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

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

Bcrypt & Argon2 Generator

Hash a password with bcrypt or Argon2 and verify a password against an existing hash. Tune the cost factor, memory, iterations and parallelism, see how long the hash takes, and read the parsed parts of any hash you paste.

securitydev

Bitwise Calculator

Calculate AND, OR, XOR, NOT and bit shifts with a live binary view of every operand and the result. Enter numbers in decimal, hex, octal or binary and see each bit line up as you type.

calculatordev

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