Free Online CSS Cubic Bezier Generator Tool

Generate CSS cubic-bezier easing functions online instantly with this free CSS Cubic Bezier Generator. Use the tool below to create custom easing curves for transitions, animations, hover effects and UI motion.

Cubic bezier settings

Create custom CSS cubic-bezier easing curves for transitions and animations with live motion preview.

Curve controls

Control points X values should stay between 0 and 1 for valid CSS. Y values can go below 0 or above 1 for overshoot effects.

Point 1 X 0.16
Point 1 Y 1.00
Point 2 X 0.30
Point 2 Y 1.00
Duration 800ms
Delay 0ms

Live preview

See the curve shape and motion timing before copying the CSS value.

Smooth motion Cubic bezier preview

Curve visualizer

The blue curve represents the easing. Handles show both cubic-bezier control points.

0 1 0 1 2

Generated CSS

Cubic bezier value cubic-bezier(0.16, 1, 0.3, 1)

Saved easings

Recent and favorite cubic-bezier curves are saved locally in this browser.

Recent easings

Favorite easings

What is a CSS Cubic Bezier Generator?

A CSS Cubic Bezier Generator is an online tool that helps you create custom CSS easing functions visually. Instead of writing cubic-bezier() values manually, you can adjust the curve, preview the motion and copy the generated CSS code.

CSS cubic-bezier functions are used to control the speed curve of transitions and animations. They define how an element moves over time, such as starting slowly, speeding up, slowing down at the end, bouncing slightly or creating a sharper motion effect.

This CSS Cubic Bezier Generator runs directly in your browser, making it fast and simple to create custom easing CSS without installing software.

What can you use it for?

You can use this online cubic-bezier generator to create custom easing for buttons, cards, menus, modals, sliders, dropdowns, hover effects, page transitions, CSS animations and interactive UI components.

For example, you may want a smooth easing curve for a button hover, a snappy entrance animation for a modal, a soft slide transition for a menu, or a custom animation timing function for a card that scales into view.

How to use the CSS Cubic Bezier Generator

Step 1: Adjust the easing curve

Use the controls to move the cubic-bezier control points and shape the motion curve.

Step 2: Preview the animation timing

Check the live preview to see how the easing function affects movement. Adjust the curve until the motion feels right for your design.

Step 3: Copy the CSS code

Copy the generated cubic-bezier() value and use it in transition-timing-function, animation-timing-function or the CSS shorthand properties for transitions and animations.

CSS cubic-bezier options

This CSS Cubic Bezier Generator can help with common easing tasks such as:

  • Generate CSS cubic-bezier values
  • Create custom easing functions
  • Create smooth transition timing
  • Create animation easing curves
  • Create ease-in effects
  • Create ease-out effects
  • Create ease-in-out effects
  • Create snappy motion curves
  • Create soft UI motion
  • Adjust cubic-bezier control points
  • Preview easing curves live
  • Generate clean CSS code
  • Copy cubic-bezier CSS instantly
  • Create hover easing effects
  • Create modal animation easing
  • Create menu transition easing
  • Create button transition timing
  • Use the tool without installing software

The final CSS output may depend on the curve you choose, the duration, the animated property and how the generated code is applied in your project.

What is cubic-bezier in CSS?

The cubic-bezier() function is a CSS timing function used to define custom easing curves. It controls how fast or slow an animation progresses between its start and end states.

A cubic-bezier function uses four numeric values:

cubic-bezier(x1, y1, x2, y2)

The x1, y1, x2 and y2 values define two control points that shape the curve. The curve starts at the beginning of the animation and ends at the final state.

In practical terms, cubic-bezier values help you decide whether a motion should feel smooth, sharp, slow, fast, natural, dramatic or playful.

Basic cubic-bezier CSS example

A custom easing curve can be used in a transition.

.button {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
  transform: translateY(-4px);
}

In this example, the cubic-bezier function controls how the button moves when it is hovered.

Cubic-bezier with transition-timing-function

You can use a cubic-bezier value with transition-timing-function.

.card {
  transition-property: transform, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

This gives you more control than a basic timing keyword such as ease or linear.

Cubic-bezier with animation-timing-function

You can also use cubic-bezier values with CSS animations.

.modal {
  animation: modalIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

This creates a smoother and more polished modal entrance animation.

 

Common easing examples

Ease

The default ease timing function starts slightly slow, speeds up and then slows down.

transition-timing-function: ease;

A similar cubic-bezier value is:

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

Ease-in

An ease-in curve starts slowly and speeds up toward the end.

transition-timing-function: ease-in;

A common cubic-bezier value is:

transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

Ease-in works well when an element is leaving the screen or moving away from the user.

Ease-out

An ease-out curve starts quickly and slows down near the end.

transition-timing-function: ease-out;

A common cubic-bezier value is:

transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

Ease-out works well for elements entering the screen, opening menus, appearing cards and modal animations.

Ease-in-out

An ease-in-out curve starts slowly, speeds up in the middle and slows down at the end.

transition-timing-function: ease-in-out;

A common cubic-bezier value is:

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

Ease-in-out works well for balanced motion, toggles, sliders and smooth UI transitions.

Snappy easing

A snappy easing curve can make UI motion feel quick and responsive.

transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

This type of curve is useful for modals, dropdowns, hover effects and interface elements that should feel fast but smooth.

Overshoot-style easing

Some cubic-bezier curves can go beyond the normal range to create an overshoot or bounce-like feeling.

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

This can be useful for playful buttons, badges, popups and attention effects. Use it carefully so the motion does not feel too exaggerated.

CSS Cubic-bezier values explained

First control point

The first control point controls the early part of the curve. It affects how the motion starts.

cubic-bezier(0.4, 0, 0.2, 1)

In this example, 0.4 and 0 form the first control point.

Second control point

The second control point controls the later part of the curve. It affects how the motion ends.

cubic-bezier(0.4, 0, 0.2, 1)

In this example, 0.2 and 1 form the second control point.

X values

The X values usually stay between 0 and 1. They control the time progression of the curve.

Y values

The Y values control the movement progress. They can sometimes go below 0 or above 1 to create overshoot-style motion.

Cubic-bezier vs CSS timing keywords

The @keyframes rule defines the stages of a CSS animation. You can use from and to, or percentage values such as 0%, 50% and 100%.

Timing keywords

CSS includes built-in timing keywords such as linear, ease, ease-in, ease-out and ease-in-out.

transition-timing-function: ease-out;

These are simple and useful for many common transitions.

Cubic-bezier

A cubic-bezier function gives you more control over the motion curve.

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

Use cubic-bezier values when you want custom motion that feels more precise, polished or brand-specific.

Cubic-bezier for transitions

CSS transitions are one of the most common places to use cubic-bezier easing.

.button {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

This creates a smoother hover effect than a simple linear transition.

Cubic-bezier for animations

CSS animations can use cubic-bezier easing to control how keyframes progress.

.element {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

This type of easing works well for entrance animations, hero sections, cards, modals and UI panels.

Easing design tips

Match the easing to the action

Use quicker easing for small hover effects and softer easing for larger page or modal transitions.

Use ease-out for entering elements

Elements entering the screen often feel better with ease-out motion because they start quickly and settle smoothly.

Use ease-in for exiting elements

Elements leaving the screen often feel natural with ease-in motion because they start slowly and speed away.

Keep motion subtle

Extreme curves can feel playful, but they may also feel distracting. Use dramatic easing only when it fits the design.

Pair easing with good duration

A great easing curve can still feel wrong if the duration is too slow or too fast. Small UI transitions often work well between 150ms and 300ms, while larger entrance animations may need a little more time.

Test on real components

The same cubic-bezier value can feel different on buttons, cards, modals and menus. Always preview it with the real element when possible.

Consider reduced motion

For important projects, consider supporting prefers-reduced-motion so users who prefer less motion can avoid unnecessary animations.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Cubic-bezier and UI motion

Good UI motion should feel natural, responsive and helpful. Cubic-bezier easing can make a simple transform, fade or slide effect feel much more professional.

For example, a button hover can feel more responsive with a quick ease-out curve. A modal can feel more polished with a softer entrance curve. A menu can feel more natural when it accelerates and settles smoothly.

By using custom easing, you can make your interface feel more consistent and intentional.

Cubic-bezier vs linear motion

Linear motion

Linear motion moves at the same speed from start to finish.

transition-timing-function: linear;

This can be useful for loaders, continuous rotation or mechanical movement, but it often feels unnatural for UI transitions.

Cubic-bezier motion

Cubic-bezier motion can accelerate and decelerate. This makes it feel more natural for most interface interactions.

transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

For buttons, menus, cards and modals, cubic-bezier easing usually feels better than linear motion.

Common cubic-bezier use cases

For buttons

Create smooth hover effects, button lift effects, press effects and CTA interactions.

For cards

Apply custom easing to card hover effects, scale effects, shadows and entrance animations.

For modals

Create smooth modal fade, slide, scale and pop-in effects.

For menus

Use cubic-bezier easing for dropdown menus, mobile navigation, sidebars and off-canvas panels.

For sliders

Create smoother slider movement, carousel transitions and UI panel changes.

For animations

Use custom easing with keyframes for fade, slide, scale, rotate, bounce and entrance effects.

Related tools

[fuo_related_tools limit="6" columns="3"]

Frequently Asked Questions

Is this CSS Cubic Bezier Generator free?

Yes. This CSS Cubic Bezier Generator is completely free to use.

No. You can generate cubic-bezier CSS directly in your browser without installing software.

cubic-bezier() is a CSS timing function used to define custom easing curves for transitions and animations.

An easing function controls how an animation progresses over time, such as starting slow, speeding up or slowing down near the end.

Yes. You can use cubic-bezier values with transition-timing-function or inside the transition shorthand property.

Yes. You can use cubic-bezier values with animation-timing-function or inside the animation shorthand property.

Yes. You can create ease-in, ease-out, ease-in-out and fully custom easing curves.

Yes. Some cubic-bezier curves can use Y values outside the normal range to create overshoot or bounce-like motion.

Yes. After creating your easing curve, you can copy the generated cubic-bezier() value and use it in your project.

Yes. You can copy the generated CSS and use it in WordPress, Elementor, custom CSS fields, blocks, themes or frontend projects.

ease is a built-in CSS timing keyword. cubic-bezier() lets you create a custom timing curve with more control.

No. Cubic-bezier controls the timing of transitions and animations. It does not directly change layout by itself.

A cubic-bezier function uses four values: x1, y1, x2 and y2. These define the shape of the easing curve.

Cubic-bezier itself is just a timing function. Performance depends more on what properties are being animated. Animating transform and opacity is usually smoother than animating layout-heavy properties.

Explore more CSS tools

Need more CSS utilities? Explore our free design tools to create animations, transforms, transitions, buttons, filters, gradients, shadows, border radius values, grid layouts, flexbox layouts and modern UI motion faster.

Scroll al inicio