Includes ease, ease-in, ease-out, ease-in-out, linear presets.

True bounce requires keyframes, but approximations are possible.

Supported in all modern browsers.

Yes, all processing is done in your browser.

CSS Cubic Bezier Generator

Visually create CSS animation easing curves. Drag handles and preview animations in real time.

Presets

Curve editor

P1(0.25, 0.10)

P2(0.25, 1.00)

Preview

Duration

1.0s

Output

cubic-bezier(0.25, 0.10, 0.25, 1.00)

transition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);

Share this tool

📖

How to Use

Step 1

Adjust Curve

Drag bezier curve handles

→

Step 2

Preview

Check with animation preview

→

Step 3

Copy

Copy CSS code for use

✨

Features

Drag Controls

Drag control points to adjust the curve

Presets

Presets like ease, ease-in, ease-out

Animation Preview

Preview easing with live animation

❓

FAQ

An easing function defining animation acceleration patterns.

🔗Related Tools

🎨

Design Tools

Color Code Converter

Convert between HEX, RGB, and HSL color codes. Use the color picker and real-time preview for intuitive color selection.

🎨

Design Tools

Color Picker

Pick colors intuitively using a color wheel and sliders. Get and copy color codes in HEX, RGB, and HSL formats.

🎨

Design Tools

Image Color Extractor

Automatically detect dominant colors from an image and generate a color palette. You can also click anywhere on the image to pick individual colors.

🎯

Design Tools

Image Average Color Picker

Calculate the average color of an entire image or a selected area. Useful for choosing color schemes or thumbnail background colors.

🌈

Design Tools

CSS Gradient Generator

Visually create CSS gradients with drag controls. Supports linear, radial, and conic gradient types with presets.

🔲

Design Tools

CSS Box Shadow Generator

Visually create CSS box-shadow with sliders. Supports multiple shadows and inset shadows.