WebToolsPlanet
css Tools

Cubic Bezier Generator

Design custom CSS easing curves visually — drag control points to create spring, bounce, and ease variants with live animation preview.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Cubic Bezier Generator?

CSS animations and transitions require a timing function that controls how the animated value changes over time. Without a timing function, all animations would progress at a constant speed (linear) — which looks robotic and unnatural. CSS provides named easing functions (ease, ease-in, ease-out, ease-in-out) as starting points, but these rarely match the precise character of professional motion design.

The cubic-bezier() function lets you define a custom S-curve (or any other shape) using four numbers: cubic-bezier(x1, y1, x2, y2). These represent two "control points" on a Bézier curve graph — the horizontal axis is time (0–1), and the vertical axis is animation progress (0–1). The curve shape between the start and end points determines whether the animation starts slow and ends fast (ease-in), starts fast and slows (ease-out), has a spring overshoot past 1.0 (back/anticipate easing), or any other motion characteristic you can imagine. The named presets are just shorthand: ease = cubic-bezier(0.25, 0.1, 0.25, 1).

How to Use Cubic Bezier Generator

1

Drag the two blue control point handles on the Bézier graph to shape the curve

2

Alternatively, type the four numeric values directly in the input fields (P1x, P1y, P2x, P2y)

3

Watch the comparison animation showing your custom easing vs linear easing side-by-side

4

Browse the preset library (ease, ease-in, ease-out, easeInOutQuad, spring, bounce) for starting points

5

Click "Copy CSS" to copy cubic-bezier(x1, y1, x2, y2) value ready to paste into transition or animation-timing-function

Common Use Cases

  • Creating a "spring" button press animation that overshoots slightly then settles (adds physicality)
  • Designing a menu slide-in that starts fast and decelerates smoothly at the final position
  • Tuning a modal overlay fade-in to feel fast-appearing but soft-landing rather than clinically linear
  • Creating an "anticipate" effect where a card moves slightly backward before flying forward
  • Matching motion to a specific design system motion spec (Material Design, Apple HIG, Fluent)
  • Designing a page transition that feels snappy without being jarring
  • Synchronizing multiple simultaneously animated elements to feel cohesive using the same easing curve
  • Replacing all transition: all 0.3s ease on a design system with more intentional per-property easing

Example Input and Output

Named CSS easing presets and their cubic-bezier() equivalents:

CSS keyword / name
ease (default)
ease-in
ease-out
ease-in-out
linear
easeInOutCubic (from Penner)
Spring-like
Anticipate / Back-in
cubic-bezier() equivalent
cubic-bezier(0.25, 0.1, 0.25, 1.0)
cubic-bezier(0.42, 0, 1.0, 1.0)
cubic-bezier(0, 0, 0.58, 1.0)
cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(0, 0, 1, 1)
cubic-bezier(0.645, 0.045, 0.355, 1.000)
cubic-bezier(0.175, 0.885, 0.32, 1.275)   /* overshoots */
cubic-bezier(0.36, 0, 0.66, -0.56)       /* dips back first */

Client-Side Processing

The Bézier curve computation and live animation preview run entirely in your browser. No data is sent to our servers.

CSS Custom Properties for Easing

Store your easing curves as CSS custom properties: :root { --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-out-smooth: cubic-bezier(0.2, 0.8, 0.2, 1); }. Reference them throughout your stylesheet: transition: transform 0.3s var(--ease-spring). This creates a consistent motion vocabulary across your design system.

CSS Linear() for Complex Curves

CSS linear() (Chrome 113+, Firefox 112+) is the newest timing function that allows multiple eased segments, enabling true spring and bounce curves in pure CSS without JavaScript: animation-timing-function: linear(0, 0.7px 2.5%, 1, 0.96, 1.01, 1). This is a major advancement over cubic-bezier which is always limited to a single cubic curve.

Frequently Asked Questions

What do the four cubic-bezier values mean?
cubic-bezier(x1, y1, x2, y2) defines two control points P1 and P2. In the animation graph: x-axis = time (0=start, 1=end), y-axis = animated value progress (0=start value, 1=end value). P1 is at coordinates (x1, y1) and P2 is at (x2, y2). x values must be between 0 and 1. y values can exceed 0–1 range (creating that spring overshoot effect). The curve always starts at (0,0) and ends at (1,1).
How can the animation value go above 1.0?
When the y value of a control point exceeds 1 (e.g., y2=1.5), the Bézier curve passes above the end position — meaning the animation progresses past 100% of its end value momentarily, then settles back. This produces the "spring" or "overshoot" effect: a button scales to 105% then settles to 100%, feeling physically bouncy. Similarly, negative y values create the "anticipate" effect (element moves backwards slightly before moving forward).
What is the difference between ease-in and ease-out?
Ease-in starts slowly and accelerates to full speed — like a car pulling away from a stop. Ease-out starts at full speed and decelerates to a stop — like a car braking. Ease-in-out combines both. For most UI animations, ease-out is preferred for elements entering the screen (they arrive energetically and slow to a stop), and ease-in is preferred for elements leaving the screen (they accelerate away, feel purposeful).
When should I use cubic-bezier vs spring physics animations?
cubic-bezier() is the right choice for most UI transitions — it is declarative, CSS-only, GPU-accelerated, and predictable. It always completes at the same time regardless of interaction. Spring physics animations (used in React Spring, Framer Motion) simulate real physical springs — duration can vary based on the spring state and interrupt behavior. Use spring physics for complex interactive gestures; use cubic-bezier for UI transitions between states.
Can I use the same easing for all CSS properties?
You can, but for precise motion design, different properties should use different easings. Scale and position usually benefit from ease-out (things decelerate naturally as they settle). Opacity on elements entering the screen works well with linear or very slight ease-out. For simultaneous property animations, use a comma-separated transition list: transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease.
What is the Penner easing library?
Robert Penner's easing functions (from his 2002 book "Flash ActionScript 3.0 for Designers") defined standard mathematical easing formulas — easeInQuad, easeOutCubic, easeInOutElastic, etc. These are widely referenced across all animation libraries (GSAP, Framer Motion, CSS Tricks) and can be closely approximated with cubic-bezier() for the non-elastic/bounce ones. For bounce and elastic easing that require oscillation, JavaScript-based animation libraries are more appropriate than CSS alone.

How This Tool Works

The SVG Bézier graph renders the four control points: (0,0), P1(x1,y1), P2(x2,y2), (1,1) connected by a cubic Bézier path using SVG cubic-bezier curve commands. The two inner control points (P1 and P2) are rendered as draggable SVG circles. Dragging updates x1/y1/x2/y2 values, which regenerates the SVG path and triggers the CSS animation demo by applying the cubic-bezier() function to the demo element's transition. The animation loops every few seconds to show the motion behavior.

Technical Stack

SVG cubic-bezier path renderingSVG drag interactionCSS transition live demoClient-side only

Related Tools

CSS Unit Converter
Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.
Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Border Radius Generator
Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Grid Generator
Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.