New toolFree · No signup

CSS Container Query Builder

Container queries let components respond to their parent container's size — not the viewport. Set a container-name and container-type on the parent, define breakpoints with CSS rules, and drag the preview slider to see the element respond in real time.

Share on X LinkedIn

Presets

Container name

Container type

Parent selector

Child selector

@container breakpoints

Breakpoint 1

→

Breakpoint 2

→

Preview — 420px container

↔ drag slider

Card Title

Resize the slider to see container queries in action

Green dashed border = container. Card responds to @container breakpoints you defined.

@container CSS Output

/* Container setup */.card-wrapper {  container-name: card;  container-type: inline-size;} @container card (max-width: 320px) {  .card {    flex-direction: column;    gap: 0.75rem;  }} @container card (min-width: 320px) {  .card {    flex-direction: row;    gap: 1.5rem;  }}

Was this tool helpful?

How to use

Pick a preset

Start from 4 presets (card, sidebar, hero, grid) to see a working @container setup immediately.

Configure the container

Set container-name, container-type (inline-size is most common), and the parent + child CSS selectors.

Add breakpoints

Each breakpoint has optional min-width and max-width thresholds, plus a list of CSS property:value rules.

Preview and copy

Drag the width slider to see the container query fire in real time. Copy the complete CSS when done.