Css
Calculadora de unidades container query
Calcula valores clamp() con unidades de consulta de contenedor para tamaños responsive por componente.
Herramientas
Gratis Herramientas CSS
Generadores CSS para layouts responsive, espaciado, pulido móvil y detalles de interfaz.
Herramientas disponibles
Herramientas CSS que puedes usar ahora
Abrir herramienta
Css
CSS Carousel Generator
Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.
Css
CSS Scroll-State Query Generator
Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.
Css
Generador de layout Subgrid CSS
Crea CSS de grid padre y subgrid hijo con alineación compartida de pistas.
Css
Generador de anillo de foco CSS
Crea reglas CSS :focus-visible accesibles con outline o box-shadow y verificación de contraste.
Css
Generador CSS safe-area-insets
Genera CSS para areas seguras en telefonos con notch o esquinas redondeadas.
Css
Comprobador de contraste CSS
Comprueba la relacion de contraste entre dos colores segun las normas WCAG.
Css
Constructor box-shadow CSS
Construye visualmente declaraciones box-shadow ajustando desplazamiento, desenfoque, extension y color.
Css
Generador CSS Flexbox
Genera CSS flexbox y esqueleto HTMLà partir de las propiedades flex selecciónadas.
Css
Constructor border-radius CSS
Define cada esquina redondeada y genera la declaración CSS border-radius.
Css
Comprobador de tamaño táctil
Verifica elementos interactivos según WCAG 2.2 tamaño mínimo (2.5.8) con resultados AA/AAA y recomendaciones CSS.
Css
View Transition Builder
Generate View Transitions API CSS and JavaScript for smooth page and element transitions. Same-document (SPA) and cross-document (MPA) support with reduced-motion fallback.
Css
Planificador de capas CSS
Planifica el orden @layer y genera una estructura de capas CSS con reglas de ejemplo.
Css
Generador CSS content-visibility
Genera CSS para content-visibility y contain-intrinsic-size para acelerar páginas largas.
Css
Generador CSS overscroll-behavior
Genera CSS overscroll-behavior para controlar pull-to-refresh y encadenamiento de desplazamiento.
Css
Generador CSS scroll-snap
Genera reglas CSS scroll-snap para carruseles, galerias y desplazamiento horizontal.
Css
Generador de container queries CSS
Genera reglas @container CSS para diseno responsive basado en componentes.
Css
Calculadora de relacion de aspecto
Calcula valores CSS aspect-ratio y fallbacks padding-bottom para evitar layout shift.
Css
Generador de unidades viewport dinamicas
Genera CSS con unidades viewport dinamicas (dvh, svh, lvh) con fallbacks.
Css
Conversor de propiedades lógicas CSS
Convierte propiedades CSS físicas en lógicas para diseños RTL y multilingües.
Css
Generador CSS anchor positioning
Genera reglas CSS anchor positioning para tooltips, dropdowns y callouts.
Css
Generador de animaciones de desplazamiento
Genera animaciones CSS de desplazamiento con animation-timeline.
Css
Generador de funcion CSS light-dark()
Genera reglas CSS color-scheme y light-dark() para modo oscuro.
Css
Generador CSS color-mix()
Genera llamadas color-mix() CSS para estados hover, bordes, fondos y texto atenuado.
Css
Generador de sintaxis de color relativa CSS
Genera sintaxis de color relativa CSS para variantes alfa, claras, oscuras y ajustadas.
Css
Generador de estilos de impresion CSS
Genera una hoja de estilo de impresion para ocultar navegación y mostrar URLs.
Css
Generador de funcion CSS contrast-color()
Genere expresiones contrast-color() CSS que seleccionan automaticamente el color de texto mas legible de una lista.
Css
Generador de CSS attr() tipado
Genere expresiones attr() tipadas con conversion de tipos para estilos CSS basados en atributos de datos.
Css
Constructor de funcion CSS if()
Cree condicionales CSS if() usando condiciones style(), media() y supports() para valores responsivos sin consultas @media.
Css
Generador CSS de sibling-index y sibling-count
Genere CSS con sibling-index() y sibling-count() para estilos basados en posicion DOM sin selectores nth-child.
Css
Calculadora de funcion CSS progress()
Calcule valores de la funcion CSS progress() para animaciones basadas en scroll y mapeo de valores.
Css
Generador de dimensionamiento CSS stretch
Genere CSS usando la palabra clave stretch para dimensionamiento fill-available en layouts block, flex, grid y absolutamente posicionados.
Css
Constructor CSS text-indent hanging/each-line
Genere declaraciones text-indent CSS con palabras clave hanging y each-line para sangria francesa y sangria tras saltos de linea.
Css
Calculadora de unidades CSS root-relative
Calcule equivalentes en pixeles para unidades rcap, rch, rex y ric basadas en el tamano de fuente raiz. Compare con rem.
Css
Generador de funcion CSS shape()
Genere funciones CSS shape() para formas no rectangulares con clip-path y shape-outside.
Css
Constructor de reglas CSS @scope
Genere reglas CSS @scope para estilizar subarboles DOM sin BEM ni CSS Modules.
Css
Optimizador SVG
Optimice archivos SVG eliminando comentarios, metadatos y espacios. Comparacion antes/despues. Procesamiento local.
Css
Convertidor SVG a URI de Datos CSS
Convierta SVG a URI de datos CSS. Opciones URL-codificado y Base64 con vista previa en vivo.
Css
Generador de Gradientes CSS
Constructor visual de gradientes CSS lineales, radiales y cónicos con vista previa en vivo. Ajuste ángulo, paradas de color y posiciones. Copie CSS limpio.
Css
Generador de Filtros CSS
Editor visual de filtros CSS con nueve funciones de filtro y vista previa en vivo. Pruebe en muestra de degradado o URL de imagen opcional. Copie CSS limpio.
Css
Generador de Sombra de Texto CSS
Cree sombras de texto CSS multicapa con ajustes preestablecidos neón, resplandor, 3D y contorno. Personalice texto, tamaño y hasta tres capas. Vista previa en vivo.
Css
Generador de Animaciones CSS Keyframes
Nueve ajustes preestablecidos de animación (fade, slide, scale, spin, pulse, bounce, shake) con duración, easing e iteración personalizables. Vista previa en vivo.
Css
Generador de Transformaciones 3D CSS
Constructor visual de transformaciones 3D CSS con controles de rotación, traslación, escala, perspectiva y origen. Tarjeta de vista previa en vivo.
En qué ayuda esta colección
Buen CSS muchas veces depende de números pequeños: tipografía fluida, espaciado, límites y breakpoints. Estas herramientas convierten esas decisiones en CSS revisable.
Ideal para
- Crear valores CSS responsive.
- Ajustar detalles móviles sin un sistema grande.
- Copiar salida CSS clara a una hoja existente.
Casos de uso comunes
- Calcular valores clamp().
- Revisar rangos responsive.
- Documentar decisiones CSS.
Task guide
Use CSS tools when you need precise responsive values for typography, spacing, or layout features without writing media queries by hand. Start with the clamp calculator to define fluid type sizes and spacing across your chosen viewport range. Add safe-area-inset support after your layout is stable if your audience includes mobile users with notched screens. For iframe embeds, add responsive containers before your layout goes live to prevent overflow on small viewports. Review each generated value at your actual breakpoints, not just the viewport extremes.
Publishing checklist
- Test generated CSS values at every breakpoint and at intermediate viewport widths where the browser transitions between them.
- Verify clamp() values render correctly in target browsers, including browsers that do not support clamp() natively.
- Check safe-area-inset fallbacks for devices that do not support env() variables.
- Validate responsive embed containers with actual content, not just placeholder boxes.
- Ensure generated CSS variable references match the names defined in your stylesheet.
FAQ
Preguntas sobre herramientas css
El CSS generado sustituye una revision visual?
No. Es un punto de partida que debes probar con contenido real.
Por qué usar clamp()?
clamp() define mínimo, valor preferido y máximo en una declaración.