Generadores de CSS y herramientas HTML
Generadores para el CSS que casi siempre se escribe a fuerza de prueba y error: degradados, sombras, layouts con grid y flexbox, animaciones con keyframes, valores clamp para tipografía fluida, triángulos hechos con bordes. Cada uno muestra una vista previa en vivo al lado de la regla que produce, lo que es mejor que guardar y recargar para mover una sombra dos píxeles. Los formateadores y minificadores de HTML y CSS también están acá, para ordenar lo que pegues de vuelta.
Herramientas de esta categoría
- Formateador HTML Embellece y minifica HTML con la indentación correcta en tu navegador.
- Formateador CSS Embellece y minifica CSS con una indentación limpia directamente en tu navegador.
- Formateador de JavaScript Embellece y formatea JavaScript con una indentación limpia y consistente directamente en tu navegador.
- Playground de Prettier Formatea JavaScript, TypeScript, CSS, JSON, HTML y Markdown con Prettier directamente en tu navegador, y ajusta las opciones de Prettier en vivo.
- Generador de CSS Grid Crea un diseño de CSS Grid visualmente con vista previa en vivo y copia el CSS de grid generado — define columnas, filas, tamaños de pista, espaciados y alineación.
- Generador de Flexbox Crea visualmente un diseño CSS Flexbox con vista previa en vivo y copia el CSS flex generado: define flex-direction, flex-wrap, justify-content, align-items, align-content, gap y la cantidad de elementos.
- Generador de Triángulos CSS Genera un triángulo en CSS con el truco clásico de los bordes: elige la dirección, define el tamaño, escoge un color, mira una vista previa en vivo y copia el CSS con width:0; height:0; border.
- Generador de CSS Transform Crea transformaciones CSS de forma visual: translate, rotate, scale, skew, además de perspective y transform-origin. Arrastra los controles, mira la vista previa en vivo y copia el CSS de transform listo.
- Generador de Animaciones CSS Crea animaciones de keyframes CSS de forma visual. Elige un preset como fade, slide, bounce, pulse, spin o shake, ajusta la duración, la función de tiempo, el retraso, el número de repeticiones y la dirección, mira una vista previa en vivo ejecutando la animación y copia el CSS completo con @keyframes y la propiedad animation.
- SVG a CSS Convierte código SVG sin procesar en una data URI lista para CSS. Obtén la versión base64 y la versión URL-encoded, más compacta, una declaración background-image lista para copiar en cada una, el tamaño en bytes de cada codificación para que elijas la menor y una vista previa en vivo de tu SVG.
- Optimizador de SVG Pega código SVG y optimízalo con SVGO para eliminar comentarios, metadatos de editores y datos redundantes. Mira el ahorro de bytes antes y después, la reducción porcentual, el SVG minificado y una vista previa en vivo, todo en tu navegador.
- Visor de SVG Pega el código SVG o sube un archivo SVG para verlo en una vista previa grande con zoom, un fondo conmutable a cuadros, claro u oscuro, y una lectura del ancho, alto y viewBox intrínsecos. Descarga el SVG o expórtalo como PNG, todo en tu navegador.
- SVG a Data URI Convierte el código SVG en un data URI puro que puedes pegar directamente en el src de una img, un atributo HTML, una cadena de JavaScript o la barra de direcciones de tu navegador. Elige codificación URL o Base64, copia el data URI listo para usar o una etiqueta img completa, y mira una vista previa en vivo, todo en tu navegador.