Web / CSS

Media Query Generator

Create breakpoints and responsive CSS structures for websites. The tool generates media queries, container rules, grid layouts and short documentation for mobile-first or desktop-first workflows.

Generator

Configure responsive CSS rules

All input is processed locally in your browser.

Basics

Base selector Container selector Strategy Output Unit Base font size

Breakpoints

One breakpoint per line using Name;Width. Example: tablet;768.

Rules

Initial columns Maximum columns Initial gap Maximum gap Initial container Maximum width

Options Include comments Add HTML sample Add reduced motion rule Add print rule

Output

CSS code

Ready.

What is this tool for?

The generator helps create consistent responsive rules quickly. It is useful for layout foundations, small projects, breakpoint documentation and as a starting point for custom CSS systems.

The output is intentionally readable and should be adapted to the existing design system after it is added to a project.