Built-in toolFree · No signup
CSS Media Query Builder
Build @media rules by combining conditions — min-width, max-width, orientation, prefers-color-scheme, prefers-reduced-motion, and more. Add multiple conditions with AND logic, or build separate breakpoint sets. The output shows both the @media rule and a ready-to-use CSS block.
Share:
Conditions
px
Generated @media rule
@media
screen and (min-width: 768px)Was this tool helpful?
How to use
01
Choose conditions
Toggle which conditions to include: min-width, max-width, orientation, dark mode preference, and more.
02
Set values
Enter pixel values for width conditions. Select orientation or preference values from the dropdowns.
03
Combine with AND
All active conditions are combined with 'and'. Use the breakpoint presets for common responsive targets.
04
Copy @media rule
Copy the complete @media rule with a placeholder CSS block ready to fill with your declarations.