Sign In
10016
Navigation
Our Products
Favorites
About Us
Contact Us
Tool Categories
Text Tools
Case ConverterLorem Ipsum GeneratorLetter CounterText to Handwriting ConverterGoogle Fonts Pair FinderBionic Reading ConverterMultiple Whitespace Remover
Image Tools
Image CropperImage FiltersImage ResizerImage Average Color FinderImage Color ExtractorSVG Blob GeneratorSVG Pattern GeneratorSVG to PNG ConverterSVG Stroke to Fill ConverterScanned PDF ConverterImage Color PickerPhoto CensorImage to Base64 ConverterImage Caption Generator
CSS Tools
CSS Loader GeneratorCSS Checkbox GeneratorCSS Switch GeneratorCSS Clip Path GeneratorCSS Background Pattern GeneratorCSS Cubic Bezier GeneratorCSS Glassmorphism GeneratorCSS Text Glitch Effect GeneratorCSS Gradient GeneratorCSS Triangle GeneratorCSS Box Shadow GeneratorCSS Border Radius Generator
Coding Tools
Code to Image ConverterURL Slug GeneratorReact Native Shadow GeneratorBase64 Encoder/DecoderHTML Encoder/DecoderURL Encoder/DecoderHTML MinifierCSS MinifierJavaScript MinifierHTML FormatterCSS FormatterJavaScript FormatterMD5 Encrypt/DecryptSHA1 Encrypt/DecryptSHA224 Encrypt/DecryptSHA256 Encrypt/DecryptSHA384 Encrypt/DecryptSHA512 Encrypt/DecryptJWT Encoder/DecoderJSON Tree Viewer
Color Tools
AI Color Palette GeneratorHEX to RGBA ConverterRGBA to HEX ConverterColor Shades GeneratorColor Mixer
Social Media Tools
Instagram FiltersInstagram Post GeneratorInstagram Photo DownloaderTweet GeneratorTweet to Image ConverterTwitter Ad Revenue GeneratorYouTube Thumbnail GrabberVimeo Thumbnail GrabberOpen Graph Meta Generator
Miscellaneous Tools
Strong Random Password GeneratorList RandomizerQR Code GeneratorBarcode GeneratorFake IBAN Generator
Sign In

Easily find text converters, image editors, and developer utilities.

CSS Cubic Bezier Generator

Drag the green or red dots on the curve to shape your easing, or pick a preset below.

Curve

First control (P1)Second control (P2)
TimeProgress

cubic-bezier(0.55, 0, 0.2, -2)

Quick presets

Preview

seconds

The ball shows progress over time. Left = negative progress, center = 0, right = positive. Play to see curves that dip below zero.

Fine-tune control points

P1

P2

Generated CSS

animation-timing-function: cubic-bezier(0.55, 0, 0.2, -2);
animation-duration: 5s;

Comments

U

Similar Coding Tools

See All

CSS Gradient Generator

Generate linear or radial CSS gradients and copy the code.

Open

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop blur and transparency.

Open

CSS Border Radius Generator

Create advanced border-radius values for each corner.

Open

CSS Clip Path Generator

Choose polygon shapes and copy clip-path CSS for your project.

Open

What is CSS Cubic Bezier Generator?

CSS Cubic Bezier Generator helps you create custom cubic-bezier() timing functions for CSS animations. The curve shows how progress changes over time: drag the green (P1) and red (P2) control points, or use the sliders and predefined presets like ease, ease-in, and ease-out.

Use the animation preview to see how your curve affects motion, then copy the generated animation-timing-function and animation-duration CSS for your project.

How to use the CSS Cubic Bezier Generator?

Follow these steps:

  1. 1

    Choose a predefined easing or drag the control points on the graph to create a custom curve.

  2. 2

    Adjust P1 (green) and P2 (red) with the sliders for precise values; X must stay between 0 and 1.

  3. 3

    Set the animation duration and click Play to preview how the curve affects progress over time.

  4. 4

    Copy the CSS and use it in your animation or transition (e.g. animation-timing-function, transition-timing-function).