Web Tools tools.bryantsmith.com

CSS & Layout

Aspect Ratio Calculator

Turn any width and height into a simplified ratio, or use a ratio to find the missing dimension. The live preview and copied CSS update as you type. Everything runs in your browser — your input never leaves the page.

Runs in your browser v1.0.0

Your numbers

live
What do you already know?

Units are optional — an aspect ratio only depends on the relationship between the numbers.

Result

live 


                    

                        
                        
                    

                    

                

            

        


        

            

                
Live preview

                Landscape
            

            

                

                    
                

                

            

        

    


    

        

            
Common ratios

            tap to apply
        

        

            

                Each shape is drawn to scale, so you can compare proportions at a glance. Select one to load
                it into the calculator.
            

            

                
                
                
                
                
                
                
                
            

        

    


    

        

            
How it works

        

        

            

                An aspect ratio compares width to height. This tool divides both numbers by their
                greatest common divisor, so 1920×1080 becomes 16:9, and it can also
                work backwards: give it a ratio and one dimension to get the other. The CSS output uses
                the modern aspect-ratio property, which keeps an element proportional at
                any size. Every calculation happens in your browser and is never sent anywhere.
            

        

    




Related tools
  • CSS Specificity CalculatorCalculate CSS selector specificity and compare which selector wins, entirely in your browser.
  • Border Radius GeneratorSet uniform or per-corner border radii with a live preview, then copy the CSS — entirely in your browser.
  • Box Shadow GeneratorVisually build single or layered CSS box shadows and copy production-ready CSS — entirely in your browser.
  • CSS Clamp GeneratorGenerate responsive clamp() values from minimum and maximum sizes and viewport ranges, with a live preview.
  • CSS Filter GeneratorBuild CSS filter chains for blur, brightness, contrast, hue, saturation and more with a live preview and copyable CSS.
  • CSS Gradient GeneratorBuild linear, radial and conic CSS gradients with a live preview and copy-ready CSS — all in your browser.
More CSS & Layout tools