◈Free
CSS media query builder
Build bounded viewport and optional preference media queries.
Build bounded viewport and optional preference media queries. Combine optional minimum and maximum widths with dark-scheme or reduced-motion preferences. A zero maximum width omits the upper bound, and empty conditions become all.
How to use
- Enter your text, values, or image.
- Adjust the options and run the tool.
- Copy or download your result.
Worked example
Example input
Minimum width px: 320 Maximum width px (0 = none): 768 Preference: none
Example result
@media (min-width: 320px) and (max-width: 768px) {
/* styles */
}Limitations and details
The result is an empty CSS rule scaffold; it does not add styles or detect whether a breakpoint suits your content.
Inputs and options
- Minimum width px
- Number · Minimum: 0 · Maximum: 10000
- Maximum width px (0 = none)
- Number · Minimum: 0 · Maximum: 10000
- Preference
- None / Dark scheme / Reduced motion
Frequently asked questions
Is this tool free and private?
Yes. All 300 tools are free in this phase. Processing happens in your browser; your input and files are not sent to our servers.