CSS Media Query Generator
Build CSS media queries visually. Add conditions for screen size, orientation, color scheme, and more. Use presets for common breakpoints. Copy the CSS code. Free online tool.
Reference
What are CSS media queries?
CSS media queries allow you to apply styles conditionally based on the device characteristics, such as screen width, orientation, color scheme preference, and more. They are the foundation of responsive web design.
Media features
min-width / max-width target screen widths for responsive layouts. orientation detects portrait or landscape. prefers-color-scheme respects the user's dark/light mode preference. prefers-reduced-motion detects accessibility settings. hover and pointer detect input capabilities.
Privacy
All media query generation runs 100% in your browser. No data is sent to any server.