CSS Cubic Bezier Generator

How to use

1. Adjust Control Points — Set the four values that define the curve, or click a preset to start fast.
2. Preview the Curve — The SVG curve updates in real time. Y-values outside 0–1 create overshoot/bounce.
3. Play the Animation — Watch a ball traverse the curve with your chosen duration to feel the easing.
4. Copy the CSS — Paste the generated cubic-bezier() into your transition or animation-timing-function.

Free CSS Cubic Bezier Generator

Visually craft custom cubic-bezier() easing curves for CSS transitions and animations. Drag-style numeric controls, live curve preview, ball-on-rail animation playback, and one-click copy.

Why Custom Easing Matters

The default CSS ease looks generic. Brand-defining UIs use custom easing: Material Design's standard curve, iOS's "swiftOut", or playful overshoots for game-like interfaces. A 50ms difference in timing or a different acceleration profile can make an interface feel polished vs cheap.

Popular Curves

• Material Standard: cubic-bezier(0.4, 0, 0.2, 1)
• Material Decelerate: cubic-bezier(0, 0, 0.2, 1)
• iOS Default: cubic-bezier(0.25, 0.1, 0.25, 1)
• Bouncy: cubic-bezier(0.68, -0.55, 0.27, 1.55)

Privacy

All preview, math, and code generation happen locally in your browser.

Related: CSS Gradient Generator, Box Shadow Generator.

Frequently asked questions

What is a cubic-bezier curve?

It is a mathematical curve defined by 4 control points used to describe how a value changes over time. In CSS it controls acceleration — when an animation speeds up or slows down.

Can values go above 1 or below 0?

Yes. Y-values (the 2nd and 4th numbers) can be negative or exceed 1 to create overshoot and bounce effects. X-values are clamped to 0–1.

What's better than the default 'ease'?

For UI work try cubic-bezier(0.4, 0, 0.2, 1) — Google's Material Standard. It feels snappier and more responsive than the default browser ease.

Is this only for transitions?

No. The same cubic-bezier() works with animation-timing-function, scroll-timeline easing, and Web Animations API options.

Related free tools

• CSS Gradient Generator — Create linear and radial CSS gradients with live preview.
• Box Shadow Generator — Design CSS box shadows with a visual editor.
• Border Radius Previewer — Preview and generate CSS border-radius values.
• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.