Cubic Bezier Generator
Design CSS cubic-bezier easing curves with live preview, SVG visualization, and named presets.
Control points
Presets
Curve preview
CSS value
cubic-bezier(0.25, 0.1, 0.25, 1)Animation preview
What is cubic-bezier?
CSS cubic-bezier(x1, y1, x2, y2)defines a custom easing curve using two control points (P1 and P2). The x-values (0–1) represent time, and the y-values represent progress (y < 0 or y > 1 creates overshoot effects). Use named presets like ease-in-out as starting points, then tweak the sliders to fine-tune your animation.
Private & free — this tool runs entirely in your browser.
Recommended: Kinsta — Fast managed hosting — up to $500 + 10% recurring.affiliate
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.