ADVERT

🪟 Container Query Builder

Plan component-level breakpoints, preview how layouts respond to container width changes, and copy production-ready CSS container queries with matching markup.

Working preview

Drag the container width to watch the layout respond. Container queries fire based on the element's own size, not the viewport.

Container width

720px

Base styles • 1 col • 16px gap • 18px padding≥ 640px • 2 cols • 20px gap • 20px padding≥ 960px • 3 cols • 24px gap • 24px padding

New

Adaptive analytics

Track usage patterns and surface insights that flex with your component.

Usage

Team highlights

Reveal richer summaries as the container grows without duplicating markup.

Tip

Content choreography

Let container queries choreograph density without adding viewport breakpoints.

Container query CSS

.cq-wrapper {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cq-wrapper .card {
  padding: 18px;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(26, 26, 26, 0.12));
  box-shadow: var(--shadow-1, 0 18px 38px rgba(15, 23, 42, 0.12));
}
.cq-wrapper .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--brand, #dc2626) 14%, transparent);
  color: color-mix(in srgb, var(--brand, #dc2626) 70%, #111);
}

/* ≥ 640px */
@container (min-width: 640px) {
  .cq-wrapper {
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cq-wrapper .card {
    padding: 20px;
  }
}

/* ≥ 960px */
@container (min-width: 960px) {
  .cq-wrapper {
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cq-wrapper .card {
    padding: 24px;
  }
}

Markup scaffold

<!-- Container query example -->
<section class="feature-panel">
  <div class="cq-wrapper">
    <article class="card">
      <span class="badge">New</span>
      <h3>Adaptive analytics</h3>
      <p>Track usage patterns and surface insights that flex with your layout.</p>
    </article>
    <article class="card">
      <span class="badge">Usage</span>
      <h3>Team highlights</h3>
      <p>Show more detail as space grows &mdash; all from the same component.</p>
    </article>
    <article class="card">
      <span class="badge">Tip</span>
      <h3>Content choreography</h3>
      <p>Let container queries choreograph density without extra breakpoints.</p>
    </article>
  </div>
</section>

ADVERT

More like this

Generate neumorphic soft UI effects with adjustable shadows, blur, border radius, and inset mode. Copy CSS code instantly.

Generate glassmorphism CSS with background transparency, blur, border radius, and frosted glass effects. Copy CSS code instantly.

Design interactive button hover states with border wipe, glow trail, and micro-motion presets. Adjust colors, radius, timing, and copy production-ready CSS.

Experiment with flexbox layouts in real time. Adjust direction, wrapping, alignment, and gaps visually, then copy clean CSS for your own UI layouts.

Build fluid typography with ease. Enter min/max font sizes and viewport breakpoints to produce a precise CSS clamp() font-size formula with live preview.

Create multi-step CSS animations with translate, rotate, scale, and opacity controls. Preview the timeline and copy clean keyframe CSS.

Define bezier control points, visualize the curve, and export production-ready CSS offset-path animations with configurable timing, iterations, and offset-rotate.

Design scroll-driven reveal effects, map scroll ranges, and export modern @scroll-timeline CSS alongside IntersectionObserver fallbacks for wider browser support.

ADVERT