Free tools
English
CSS media query generator
CSS media query generator — choose your inputs and copy or save the result. Input guide: Minimum viewport width (px), Maximum viewport width (px). No account needed.
No account needed
Loading tool…
How to use
- 1Input guide: Minimum viewport width (px), Maximum viewport width (px).
- 2Run the tool and review the result.
- 3Copy result / Save result file.
Good to know
Inspect the example output format first. Keep the original separately and check transformed values, spaces and line breaks before using the result.
Ads may process connection data. Personalization follows your privacy choices. Privacy (English)
Worked input and output example
These results come from this tool’s actual engine using the sample values below, not your personal input or saved work. Load the example in the tool to inspect the same inputs.
Example input
| Field | Value |
|---|---|
| Minimum viewport width (px) | 640 |
| Maximum viewport width (px) | 1280 |
Example result
@media (min-width: 640px) and (max-width: 1280px) {
.element {
display: block;
}
}