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 (min-width: 400px) {
  
}

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.