Guides JP

Cubic Bezier Generator

Adjust the four cubic-bezier(x1,y1,x2,y2) values with sliders or numbers and check the easing with an SVG curve and animated preview. Copy the ready-to-use transition CSS.

Last updated: 2026/10/16 Design Feedback & bug reports
Curve
X1
Y1
X2
Y2
Preview
translate
scale
opacity / rotate
1.2s
CSS Code 

    


    
    

        
Presets

        
Apply CSS standard keywords and popular easings with one click.

        

    





    
    



    
How to Use

    

        

            
1

            

                
Adjust Control Points

                
Adjust the four values X1, Y1, X2, Y2 with sliders or number inputs. The curve updates in real time.

            

        

        

            
2

            

                
Check the Motion

                
Press the Play button to run the animated ball and feel the actual acceleration and deceleration of your easing.

            

        

        

            
3

            

                
Use Presets

                
Pick a base from presets such as ease, ease-in-out, or bounce-like curves, then fine-tune for quick results.

            

        

        

            
4

            

                
Copy the CSS

                
Copy the generated transition CSS with the copy button and paste it directly into your stylesheet.

            

        

    






    

        

            
What is cubic-bezier?

            
cubic-bezier() is a CSS easing function that lets you freely define the timing of transitions and animations using four numbers (the coordinates of two control points). The shape of the cubic Bezier curve maps time to progress, allowing precise acceleration, deceleration, and overshoot effects. This tool runs entirely in your browser and your values are never sent to a server.

        

        

            
Features

            
    
                
  • Real-time PreviewControl point changes instantly update the SVG curve and animated ball so you can see the easing.
    • 
                
  • Drag to EditDrag the handles directly on the graph to craft easing curves intuitively.
    • 
                
  • Rich PresetsApply everything from standard ease keywords to popular overshooting easings with one click.
    • 
                
  • Privacy ProtectedAll processing happens in your browser. Your input is never sent to servers.
    • 
            

        

        

            
Use Cases

            
    
                
  • Tuning hover animations for buttons and cards
    • 
                
  • Open/close transitions for modals and menus
    • 
                
  • Designing easing for scroll-linked animations
    • 
                
  • Fine-tuning the timing of micro-interactions
    • 
                
  • Unifying motion across UI kits and design systems
    • 
            

        

    






    
FAQ

    

        
Is the cubic-bezier generator free to use?
Yes, it is completely free. No registration required, just open it in your browser.

        
Why are the X values limited to the 0-1 range?
By the cubic-bezier() spec, the X coordinates of the control points (X1, X2) must be within 0-1 or they are invalid. The Y coordinates (Y1, Y2) can exceed 0-1, and values above 1 produce an overshoot (going past the target before settling).

        
Are CSS keywords and cubic-bezier equivalent?
Yes. The keyword ease equals cubic-bezier(0.25, 0.1, 0.25, 1), and ease-in-out equals cubic-bezier(0.42, 0, 0.58, 1), producing identical motion. You can apply these from the presets in this tool.

        
Can I use the generated CSS as-is?
Yes. The output is formatted as a transition property that you can copy and paste straight into your stylesheet. The same cubic-bezier() value also works with transition-timing-function and animation-timing-function.

        
Is my input sent to a server?
No. This tool runs entirely in your browser with JavaScript. Your values and generated CSS are never sent to or stored on any server, so you can use it with peace of mind.

    













    
Related Tools

    

                
            
            
                px to vw Converter
                Convert CSS px to vw. Bulk CSS conversion supported
            
        
                
            
            
                px to em/rem Converter
                Convert CSS px to em/rem. Bulk CSS conversion supported
            
        
                
            
            
                Aspect Ratio Calculator
                Calculate simplified aspect ratio from dimensions
            
        
                
            
            
                Line Height Calculator
                Calculate line-height ratio from font size and leading
            
        
                
            
            
                CSS Gradient Generator
                Visually create Linear, Radial & Conic CSS gradients
            
        
            







    
Popular Tools

    

                
            
            
                Character Counter
                Count characters, words, and lines in real-time
            
        
                
            
            
                JSON Formatter
                Format and validate JSON with syntax highlighting
            
        
                
            
            
                QR Code Generator
                Create custom QR codes with logo, colors & styles
            
        
                
            
            
                Password Generator
                Generate secure random passwords with one click
            
        
                
            
            
                Base64 Encoder
                Encode and decode text or files to Base64
            
        
                
            
            
                IP Address Checker
                Check your global IP address
            
        
            







    
Related Guides

    

                
            
                CSS Easing and cubic-bezier Explained: ease vs linear and the 4 Values
                A beginner-friendly guide to CSS easing and cubic-bezier. Learn the difference between ease, linear, and ease-in-out, what the four values in cubic-bezier(x1,y1,x2,y2) mean as control points, how the curve relates to motion, how to specify it in transition and animation, and how to craft natural movement.
            
        
                
            
                Intro to CSS Animation: @keyframes, the animation Property, and vs. transition
                A beginner-friendly guide to CSS animation basics: defining motion with @keyframes, the meaning of the animation property's duration, timing-function, delay, iteration-count, and direction, the difference from transition, how to build common effects like fade and slide, and performance tips.
            
        
                
            
                CSS Transition Basics: Properties, Hover Animations, and Smooth Motion
                Learn the basics of CSS transitions: the four parts (property, duration, timing-function, delay), how to change color and size on hover, the difference from animation, easing tips for natural motion, and performance pitfalls.