Ningún dato se envía al servidor
6 plantillas para empezar al instante
Convierte media queries automáticamente
El Generador de Container Queries CSS te permite construir visualmente consultas @container de CSS usando una interfaz gráfica intuitiva.
A diferencia de los media queries que responden al ancho del viewport, los container queries responden al ancho del elemento padre. Esto permite un diseño responsivo a nivel de componente con máxima reutilización.
Configura container-type y container-name, añade breakpoints, elige presets, previsualiza en tiempo real redimensionando, y convierte media queries existentes — todo en tu navegador. Ningún dato se envía a un servidor.
Configurar Contenedor
Configura container-type y container-name en "Configuración del Contenedor". El valor más común, inline-size, está seleccionado por defecto.
Añadir Breakpoints
Añade breakpoints con condiciones (min-width, etc.) y estilos CSS. También puedes usar presets para configuración rápida.
Vista Previa
Arrastra el contenedor de vista previa para redimensionarlo y ver los estilos de container query en acción. Usa pantalla completa para más ancho.
Copiar Código
Copia el código CSS generado desde la sección "Código Generado" usando el botón 📋.
- container-type
- Propiedad que define un elemento como un contenedor de consulta. inline-size habilita consultas horizontales, size habilita ambos ejes.
- container-name
- Propiedad que da un nombre al contenedor. Los contenedores con nombre permiten dirigir consultas a contenedores específicos.
- @container
- At-rule usada para escribir container queries. Aplica estilos a elementos hijos basándose en las dimensiones del contenedor.
- container shorthand
- El shorthand container: name / type permite establecer ambos container-name y container-type en una sola declaración.
- Containment (Contención)
- Especificación CSS que aísla el renderizado y cálculos de layout de un elemento. Establecer container-type aplica contención automáticamente.
- inline-size
- Valor de container-type que habilita consultas solo en el eje inline (horizontal). El valor más comúnmente utilizado.
Los container queries CSS usan la regla @container combinada con la propiedad container-type. Es un enfoque fundamentalmente diferente a los media queries tradicionales.
Media Queries vs Container Queries
Los media queries (@media) cambian estilos según el tamaño del viewport. Los container queries (@container) cambian estilos según el tamaño del contenedor padre. El mismo componente se adapta automáticamente ya sea en un sidebar o en el área de contenido principal.
Valores de container-type
inline-size permite consultas solo en el eje horizontal — la opción más común. size permite consultas en ambos ejes pero requiere contención de altura. normal es el valor por defecto y desactiva container queries.
Soporte de Navegadores
Compatible con Chrome 105+, Safari 16+, Firefox 110+, Edge 105+. Todos los navegadores modernos desde 2023. Los navegadores no compatibles simplemente ignoran las reglas @container sin romper el layout (mejora progresiva).
- Q. ¿Se envían datos a un servidor?
- A. No. Todo el procesamiento ocurre en tu navegador. Ningún dato, incluido el CSS generado, se envía a un servidor.
- Q. ¿Cuál es la diferencia entre container queries y media queries?
- A. Los media queries responden al ancho del viewport, mientras que los container queries responden al ancho del elemento padre. Esto permite diseño responsivo a nivel de componente.
- Q. ¿Qué navegadores soportan container queries?
- A. Chrome 105+, Safari 16+, Firefox 110+ y Edge 105+. Todos los navegadores modernos desde 2023. Internet Explorer no es compatible.
- Q. ¿Puedo convertir media queries existentes a container queries?
- A. Sí. Usa la función "Conversión de Media Query" para convertir automáticamente @media a @container.
- Q. ¿Cuál es la diferencia entre inline-size y size?
- A. inline-size permite consultas solo en el eje horizontal. size permite consultas en ambos ejes. inline-size es suficiente para la mayoría de casos.
- Q. ¿Funciona en móvil?
- A. Sí. La herramienta es responsive, aunque el redimensionado funciona mejor en escritorio.
- Q. ¿Es gratuita esta herramienta?
- A. Sí. Completamente gratuita y sin límites de uso.
UI de Componentes
Tarjetas que adaptan su layout automáticamente al colocarlas en un sidebar vs. área principal. Una definición, funciona en cualquier lugar.
Sistemas de Diseño
Construye componentes container-aware que se muestran correctamente sin importar dónde se coloquen. Define una vez, reutiliza en todo tu sistema.
Widgets CMS
Crea widgets WordPress que se ajustan según el ancho del área. Perfecto para sidebars, footers y áreas de contenido flexible.
Dashboards
Optimiza gráficos y estadísticas según el tamaño del panel. Ideal para paneles redimensionables y componentes de visualización de datos.
- Generador de CSS Box-Shadow｜Multicapa y Presets
- Generador CSS Clip-Path｜Editor Visual con Presets
- Generador de Animaciones CSS｜Salida de código @keyframes
- Generador de Gradientes CSS｜Lineal, radial y cónico con patrones CSS
- Generador de Animación Sprite CSS｜Código steps() Automático
- Generador Animación Scroll CSS | Efectos sin JavaScript
- Generador CSS Clamp() | Cálculo de Tipografía Fluida Responsiva
- Generador CSS de Fondos SVG | Convertidor Data URI y Optimizador
- Generador Animaciones de Texto CSS | Efectos Reveal Copy-Paste