Cubic Bezier Generator

Visually construct custom CSS `cubic-bezier(x1, y1, x2, y2)` transition easing curves. Tweak control handles interactively and preview animation timing in real time.

Why Use This Tool?

• UI Animation & Motion Design: Design smooth, natural CSS transitions and keyframe animations beyond basic `ease-in` or `ease-out`.
• Bounce & Overshoot Effects: Create elastic bounce easing curves by pushing Y-coordinates beyond 1.0.
• Copy-Paste CSS Code: Copy ready-to-use `transition-timing-function: cubic-bezier(...)` code.

How to Use

1. Drag control points (P1 and P2) on the visual Bezier curve graph.
2. Click "Play Animation" to preview motion timing on a test box container.
3. Copy the generated `cubic-bezier(...)` CSS declaration.

Real Working Example

Input:

P1: (0.25, 0.1) | P2: (0.25, 1.0)

Output Result:

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Important Technical Details & Features

• Interactive Canvas Control Graph: Touch and mouse drag handles for Bezier control points.
• Preset Easing Library: Includes presets for `ease`, `ease-in-out`, `bounce`, `swift`, and `snappy`.
• 100% Local Browser Engine: Hardware-accelerated canvas preview.

Related Web & SEO Tools

• CSS Box Shadow Generator: Build CSS box shadows.
• CSS clamp() Calculator: Compute fluid responsive sizes.
• CSS Gradient Generator: Generate CSS gradients.