Loading…

How to use Cubic Bezier Editor

Drag the two control points on the curve, and the tool shows a live animated preview alongside the matching cubic-bezier() CSS.

Frequently asked questions

What is a cubic-bezier easing curve?

A timing function defined by two control points that shapes how an animation accelerates and decelerates over time.

What range can the values use?

The x values are clamped between 0 and 1, while the y values can go slightly beyond for overshoot and bounce effects.

How do I preview the easing?

The editor animates a dot along the curve so you can feel the timing before copying the CSS.

More CSS Generators

CSS Text Stroke Generator
Add outlined text with -webkit-text-stroke and live preview
CSS Outline Generator
Generate outline width, style, color and offset with preview
CSS Backdrop Filter Generator
Build backdrop-filter blur, brightness and saturation effects
CSS Blend Mode Generator
Preview all mix-blend-mode values on overlapping shapes
CSS Mask Fade Generator
Fade element edges with mask-image linear gradients
CSS 3D Perspective Generator
Rotate elements in 3D space with perspective and live preview
CSS Aspect Ratio Generator
Get aspect-ratio plus the padding-hack fallback for any ratio
CSS Multi-Column Generator
Build newspaper-style column-count layouts with column rules
CSS Object Fit Generator
Preview object-fit and object-position on images live
CSS Line Clamp Generator
Truncate multi-line text with -webkit-line-clamp ellipsis
CSS Writing Mode Generator
Set vertical and horizontal writing-mode with text-orientation
CSS Image Rendering Generator
Control pixelated vs smooth image-rendering with live preview

← View all CSS GeneratorsBrowse all 1,100+ tools →