devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

CSS Cubic Bezier & Easing Generator

Shape an easing curve by dragging two handles and race it against standard easings. Need physics? Switch to spring or bounce mode for CSS linear() curves.

Atualizado em
yours
ease
Output

    
Presets
Click to load into the editor.

  



    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Cubic Bezier Generator
  1. Drag the two purple handles to shape the curve, or type the four numbers.
  2. Press Play to race your curve against a standard easing such as ease.
  3. For physical motion, switch to Spring or Bounce and adjust stiffness, damping or bounces.
  4. Copy the value for CSS, Tailwind, the Web Animations API, Framer Motion or GSAP.


What is a cubic-bezier easing?


An easing curve maps time (x axis) to progress (y axis). cubic-bezier(x1, y1, x2, y2) describes that curve with two control points; the start (0,0) and end (1,1) are fixed. Curves that rise quickly feel snappy (ease-out), curves that start flat feel heavy (ease-in), and y values above 1 or below 0 overshoot for a playful “back” effect. The x values must stay between 0 and 1.


Which easing should I use?


MotionEasingWhy


Element entering the screenease-out (e.g. cubic-bezier(.16,1,.3,1))Arrives fast, settles gently


Element leavingease-inAccelerates away


Moving on screenease-in-outNatural start and stop


Playful UI, togglesback / springA small overshoot feels alive


Progress, spinnerslinearConstant speed




Springs and bounces with linear()


A cubic-bezier can overshoot only once. Real springs wobble several times and bounces hit the floor repeatedly, which needs the CSS linear() function: a list of progress values the browser joins with straight lines. This tool simulates a spring (stiffness, damping, mass) or a bouncing ball and samples it into linear(), along with the duration the motion needs to settle. linear() works in Chrome and Edge 113+, Firefox 112+ and Safari 17.2+; use the cubic-bezier fallback for older browsers.


Use your curve in the CSS animation generator or for loaders in the CSS loader generator.
Também pesquisado como: css easing, cubic-bezier css, easing functions, css spring animation, linear() easing, easing generator, bezier curve css.
Ferramentas que combinam com: Cubic Bezier Generator
  • CSS Keyframes Generator — A visual editor for @keyframes.
  • CSS Hover Animation Generator — Design hover animations for buttons, cards, links and icons.
  • Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
  • CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
Perguntas frequentes
Can y values go above 1 or below 0?
Yes. y1 and y2 can be any number, which makes the animation overshoot or pull back first. Only x1 and x2 must stay between 0 and 1.
How do I use a cubic-bezier in Tailwind?
Use an arbitrary value: ease-[cubic-bezier(0.16,1,0.3,1)], or add it to theme.extend.transitionTimingFunction. The output panel shows both.
What does linear() do?
It defines an easing as a list of points joined by straight lines. With enough points it can approximate any curve, including springs and bounces that a single cubic-bezier cannot express.
Why does my spring need a longer duration?
A spring takes as long as it needs to settle. The generator calculates that time from stiffness, damping and mass and puts it in the output — use it as the duration so the motion ends smoothly.
Posso instalar o Cubic Bezier Generator como um aplicativo da web e usá-lo offline?
Sim. O Cubic Bezier Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localCSS Animation GeneratorDesign CSS animations on a real keyframe timeline. Start from 50+ presets, scrub through every frame,…localCSS Loader GeneratorPick from 13 pure-CSS loading spinners, adjust size, colors, thickness and speed, and copy lightweight,…localCSS Keyframes GeneratorA visual editor for @keyframes. Add keyframes on a timeline, set transforms, opacity, blur and color at…localCSS Hover Animation GeneratorDesign hover animations for buttons, cards, links and icons. Pick an effect, try it on different elements…localCalculadora de braçadeirasDigite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de…localCSS Gradient GeneratorDesign a gradient visually — drag color stops, change the angle or type, start from a preset — and copy…