buncha/code & dev/css-bezier

CSS Cubic Bezier Generator

Drag the two handles to shape the easing curve. Anchors stay locked at the start (0,0) and end (1,1). The Y axis allows overshoot for "back" / bounce curves. Use the result as a CSS transition-timing-function or animation-timing-function.

Presets

Duration — 1.00 s

Position

CSS value

cubic-bezier(0.420, 0.000, 0.580, 1.000)

How to use this in CSS

.box {
  transition: transform 1.00s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

.box.animate {
  animation: slide 1.00s cubic-bezier(0.420, 0.000, 0.580, 1.000) forwards;
}

Everything runs locally — drag the handles and the CSS updates live.

Read the guide

Cubic Bezier Easing Curves in CSS: Picking Animations That Feel Right

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

About CSS Cubic Bezier Generator

Visual editor for CSS cubic-bezier easing curves. Drag handles to shape the curve, preview with a live animation, and copy the ready-to-paste cubic-bezier(...) value.

Everything happens on your device. Close the tab and it's gone.