Herramientas de CSS y diseño
Calculadora de unidades container query
Calcula valores clamp() con unidades de consulta de contenedor para tamaños responsive por componente.
Herramientas
Gratis Herramientas de CSS y diseño
Generadores CSS para layouts responsive, espaciado, pulido móvil y detalles de interfaz.
Herramientas disponibles
Herramientas de CSS y diseño que puedes usar ahora
Abrir herramienta
Herramientas de CSS y diseño
Generador de carruseles CSS
Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.
Herramientas de CSS y diseño
Generador de consultas CSS Scroll-State
Genera consultas de contenedor CSS scroll-state() para aplicar estilos a elementos ajustados, fijados o desplazables. Incluye un fallback de JavaScript para otros navegadores.
Herramientas de CSS y diseño
Generador de layout Subgrid CSS
Crea CSS de grid padre y subgrid hijo con alineación compartida de pistas.
Herramientas de CSS y diseño
Calculadora CSS clamp()
Calcula valores CSS clamp responsive para tipografía y espaciado.
Herramientas de CSS y diseño
Generador CSS safe-area-insets
Genera CSS para areas seguras en telefonos con notch o esquinas redondeadas.
Herramientas de CSS y diseño
Comprobador de contraste CSS
Comprueba la relacion de contraste entre dos colores segun las normas WCAG.
Herramientas de CSS y diseño
Constructor box-shadow CSS
Construye visualmente declaraciones box-shadow ajustando desplazamiento, desenfoque, extension y color.
Herramientas de CSS y diseño
Generador CSS Flexbox
Genera CSS flexbox y un esqueleto HTML a partir de las propiedades flex seleccionadas.
Herramientas de CSS y diseño
Constructor border-radius CSS
Define cada esquina redondeada y genera la declaración CSS border-radius.
Herramientas de CSS y diseño
Generador de transiciones de vista
Genera CSS y JavaScript para la API View Transitions con transiciones de página y de elementos, compatibilidad con SPA y MPA, y fallback para reduced-motion.
Herramientas de CSS y diseño
Planificador de capas CSS
Planifica el orden @layer y genera una estructura de capas CSS con reglas de ejemplo.
Herramientas de CSS y diseño
Generador CSS content-visibility
Genera CSS para content-visibility y contain-intrinsic-size para acelerar páginas largas.
Herramientas de CSS y diseño
Generador CSS overscroll-behavior
Genera CSS overscroll-behavior para controlar pull-to-refresh y encadenamiento de desplazamiento.
Herramientas de CSS y diseño
Generador CSS scroll-snap
Genera reglas CSS scroll-snap para carruseles, galerias y desplazamiento horizontal.
Herramientas de CSS y diseño
Generador de container queries CSS
Genera reglas @container CSS para diseno responsive basado en componentes.
Herramientas de CSS y diseño
Calculadora de relacion de aspecto
Calcula valores CSS aspect-ratio y fallbacks padding-bottom para evitar layout shift.
Herramientas de CSS y diseño
Generador de unidades viewport dinamicas
Genera CSS con unidades viewport dinamicas (dvh, svh, lvh) con fallbacks.
Herramientas de CSS y diseño
Conversor de propiedades lógicas CSS
Convierte propiedades CSS físicas en lógicas para diseños RTL y multilingües.
Herramientas de CSS y diseño
Generador CSS anchor positioning
Genera reglas CSS anchor positioning para tooltips, dropdowns y callouts.
Herramientas de CSS y diseño
Generador de animaciones de desplazamiento
Genera animaciones CSS de desplazamiento con animation-timeline.
Herramientas de CSS y diseño
Generador de transiciones discretas
Genera CSS para animar elementos que aparecen o desaparecen.
Herramientas de CSS y diseño
Generador de funcion CSS light-dark()
Genera reglas CSS color-scheme y light-dark() para modo oscuro.
Herramientas de CSS y diseño
Generador CSS color-mix()
Genera llamadas color-mix() CSS para estados hover, bordes, fondos y texto atenuado.
Herramientas de CSS y diseño
Generador de sintaxis de color relativa CSS
Genera sintaxis de color relativa CSS para variantes alfa, claras, oscuras y ajustadas.
Herramientas de CSS y diseño
Generador de estilos de impresion CSS
Genera una hoja de estilo de impresion para ocultar navegación y mostrar URLs.
Herramientas de CSS y diseño
Generador de funcion CSS contrast-color()
Genere expresiones contrast-color() CSS que seleccionan automaticamente el color de texto mas legible de una lista.
Herramientas de CSS y diseño
Generador de CSS attr() tipado
Genere expresiones attr() tipadas con conversion de tipos para estilos CSS basados en atributos de datos.
Herramientas de CSS y diseño
Constructor de funcion CSS if()
Cree condicionales CSS if() usando condiciones style(), media() y supports() para valores responsivos sin consultas @media.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
Calculadora de funcion CSS progress()
Calcule valores de la funcion CSS progress() para animaciones basadas en scroll y mapeo de valores.
Herramientas de CSS y diseño
Generador de dimensionamiento CSS stretch
Genere CSS usando la palabra clave stretch para dimensionamiento fill-available en layouts block, flex, grid y absolutamente posicionados.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
Generador de funcion CSS shape()
Genere funciones CSS shape() para formas no rectangulares con clip-path y shape-outside.
Herramientas de CSS y diseño
Constructor de reglas CSS @scope
Genere reglas CSS @scope para estilizar subarboles DOM sin BEM ni CSS Modules.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
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.
Herramientas de CSS y diseño
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 de css y diseño
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.