CSS Container Query Builder

Scaffold a CSS @container query with sensible defaults.

Container name (optional) Min width (px)

Rules to apply at the breakpoint

.container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { font-size: 1.25rem; }
}

About this tool

Pick a container name and a breakpoint width, paste in your styles, and the tool emits the container-type / container-name CSS plus the matching @container rule.