〰️ CSS Cubic-Bezier Visualizer
Create CSS cubic-bezier easing curves with a visual editor. Drag control points and preview animation in real time. Copy the CSS transition value. Free cubic-bezier generator.
How to Use
1
Drag the control points
Click and drag the two colored handles on the SVG canvas to define your easing curve shape.
2
Preview the animation
Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.
3
Copy the function
Click Copy to copy the cubic-bezier() value. Use it in your CSS transition or animation.
Frequently Asked Questions
What is cubic-bezier in CSS?
cubic-bezier() is a CSS timing function that controls the speed curve of transitions and animations. It takes four values (P1x, P1y, P2x, P2y) that define two control points of a Bézier curve between (0,0) and (1,1).
What do the four values in cubic-bezier mean?
The four values are x1, y1, x2, y2 — the coordinates of two control points. x values must be between 0 and 1 (they represent time). y values can be outside 0–1, which creates bounce or overshoot effects.
What are the built-in CSS easing functions?
ease is cubic-bezier(0.25,0.1,0.25,1). ease-in is cubic-bezier(0.42,0,1,1). ease-out is cubic-bezier(0,0,0.58,1). ease-in-out is cubic-bezier(0.42,0,0.58,1). linear is cubic-bezier(0,0,1,1).
How do I create a bounce animation with cubic-bezier?
Set y values outside the 0–1 range to create overshoot. For example, cubic-bezier(0.34,1.56,0.64,1) creates a spring-like bounce where the element overshoots and settles back.
Where can I use cubic-bezier in CSS?
Use it in the transition-timing-function or animation-timing-function properties. Example: transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94).
Guía: Editor de Curvas Cubic-Bezier CSS
¿Qué es?
cubic-bezier(x1,y1,x2,y2) define la curva de aceleración de animaciones y transiciones mediante dos puntos de control. Determina si la animación empieza rápido y frena (ease-out), comienza lento (ease-in), o tiene ritmo natural.
Cómo usar
- Arrastra los puntos de control en la gráfica.
- Observa la animación de previsualización en tiempo real.
- Copia el valor CSS para tu transición.
Consejos
- Para elementos que "salen", usa
ease-in; para los que "entran",ease-out. - Y mayor que 1 produce animaciones con efecto "rebote" — spring effect.
cubic-bezier(0.34,1.56,0.64,1)simula un rebote suave natural.