Web Tools tools.bryantsmith.com

CSS & Layout

Media Query Generator

Pick a breakpoint and any device conditions, then copy a ready-to-use @media block. The live match preview shows whether the query applies to a simulated device. Everything runs in your browser — nothing is sent to a server.

Runs in your browser v1.0.0

Build your query

live
Quick breakpoints
Width condition
768px
Device & preference conditions
Advanced conditions Contrast and display mode

Generated media query

copy & paste 


                    

                        
                        
                    

                

            


            

                

                    
Live match preview

                    —
                

                

                    

                        

                            1024 × 768
                        

                    


                    

                        

                            
                            

                                
                                1024px
                            

                        

                        

                            
                            

                                
                                768px
                            

                        

                    


                    

                        
                            Simulated device preferences
                            Defaults to your device
                        
                        

                            

                        

                    


                    

                    
    
                
    
            
    
        
    
    
    

    
    
        
    
            
    How it works
    
        
    
        
    
            
    
                Each non-empty condition is combined with and to form a complete
                @media block. The live match preview compares the query against a simulated
                viewport: width and height drive orientation, and the preference conditions
                are matched against the simulated device settings (which start from your real device).
                Widths in rem or em are converted at 16px per unit for
                comparison. Invalid input is reported inline instead of producing broken CSS.
            
    
        
    
    
    

    

    Related tools
    • 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.
    • CSS Grid GeneratorDesign grid columns, rows, gaps and named areas visually with a live preview and copy-ready CSS — all in your browser.
    More CSS & Layout tools