Inicio › Herramientas para desarrolladores › Herramientas web, HTML y CSS
Herramientas web, HTML y CSS
Generadores de CSS, herramientas HTML, color, maquetación, animación y ayudas para diseño front-end. 52 herramientas gratis que funcionan en tu navegador, sin registro.
Resultados de búsqueda
Ninguna herramienta coincide con tu búsqueda.
Vista previa de Open GraphPaste OG tags and preview how links look on Facebook, X and LinkedIn.Generador de código para insertar videos de YouTubeCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.Generador de box-shadow CSSDiseña sombras CSS box-shadow en capas con vista previa en tiempo real, ajustes predefinidos y Copiar CSS en un clic.Generador de border-radius CSSRedondea cada esquina, crea radios elípticos de 8 valores o formas blob aleatorias y copia el CSS.Generador de botones CSSDiseña botones CSS con degradados, bordes, sombras y estados hover y active, y copia el código.Generador de Flexbox CSSCrea diseños flexbox de forma visual: ajusta las propiedades del contenedor y de los elementos, y copia el CSS y el HTML.Generador de Twitter CardsCrea metaetiquetas de X / Twitter Card con alternativas Open Graph, contadores de caracteres y vista previa en vivo.Generador de CSS GridDiseña layouts con CSS grid: define pistas y espacios, arrastra para nombrar áreas y copia el CSS y el HTML.Conversor de PX a REMConvierte px a rem o em y viceversa, con una tabla de 1 a 100px y un conversor de CSS completo.Generador de glassmorphism CSSDiseña tarjetas de vidrio esmerilado con controles de desenfoque, transparencia y borde, y copia el CSS.Generador de sombra de texto CSSCombina capas de text-shadow CSS con vista previa en vivo y ajustes de neón, 3D, contorno y retro.Editor HTML (vista previa en vivo)Escribe HTML, CSS y JavaScript y mira una vista previa en vivo y aislada mientras escribes.Convertidor de HTML a JSXConvierte HTML a JSX válido de React: className, htmlFor, objetos de estilo, etiquetas autocerradas y eventos.Generador de clip-path CSSDibuja formas de clip-path CSS arrastrando puntos: polígonos, círculo, elipse e inset. Copia el CSS.Generador de animaciones CSSCrea animaciones CSS con keyframes a partir de 23 ajustes predefinidos, con vista previa en vivo, controles de tiempo y Copiar CSS.Generador de triángulos CSSCrea triángulos CSS en 8 direcciones con el truco del borde o clip-path. Ajusta tamaño y color y copia el CSS.Generador de loaders CSSElige entre 14 spinners y loaders en CSS puro, ajusta color, tamaño y velocidad y copia el HTML y el CSS.Generador de cubic-bezierArrastra los puntos de control para diseñar una curva de easing CSS, compárala con linear y copia cubic-bezier().Generador de filtros CSSAjusta desenfoque, brillo, contraste, tono, sepia y sombra (drop-shadow) en una imagen y copia el filtro CSS.Calculadora de especificidad CSSCalcula la especificidad de selectores CSS (a, b, c), incluidos :is(), :not(), :has() y :where(), y compáralos.Generador de código para insertar Google MapsConvierte una dirección o unas coordenadas en código iframe responsive de Google Maps, sin clave de API.Generador de neumorfismo CSSDiseña formas neumórficas de soft UI con vista previa en vivo y copia el CSS del box-shadow.Generador de ondas SVGCrea ondas SVG en capas para separadores de secciones y exporta en SVG, PNG o fondo CSS.Generador de blobs SVGGenera formas orgánicas SVG aleatorias (blobs) con degradados y expórtalas en SVG, PNG o CSS clip-path.Generador de CSS clamp()Genera valores clamp() fluidos para tamaños de fuente y espaciado en rem y vw, con tabla y escala tipográfica.Generador CSS @font-faceGenera reglas CSS @font-face a partir de archivos de fuentes o URL, con grosor, estilo, font-display, unicode-range y vista previa.Generador de media queries CSSCrea reglas @media para anchos, orientación, modo oscuro y hover, u obtén los breakpoints de frameworks.Generador de scrollbar CSSPersonaliza barras de desplazamiento: ancho, colores, radio y hover, con CSS ::-webkit-scrollbar y scrollbar-color.Generador de sprites CSSAgrupa muchos iconos en un sprite sheet PNG y obtén clases CSS con background-position.Generador de texto degradado CSSCrea texto con degradado usando background-clip:text: paradas de color, ángulo, vista previa de fuente y CSS de respaldo.Generador de interruptores toggle CSSDiseña interruptores toggle en CSS puro: tamaño, colores, forma y animación. Copia HTML + CSS accesible.Generador de tooltips CSSCrea tooltips en CSS puro: posición, flecha, colores, relleno y animación. Copia el HTML y el CSS.Generador de formularios HTMLArrastra y suelta campos de formulario con etiquetas y validación, y copia código HTML y CSS accesible.Generador de iframeCrea código iframe para insertar: tamaño o proporción adaptable, borde, allow, sandbox, carga diferida y vista previa.Convertidor de px a vwConvierte píxeles a vw y vh para cualquier tamaño de viewport, y vw/vh a px, con tablas de breakpoints.Editor de rutas SVGEdita el atributo d de una ruta SVG de forma visual: arrastra puntos, edita comandos, convierte, escala y minifica.SVG a Data URI para CSSConvierte código SVG en un data URI pequeño codificado en URL para fondos CSS, con comparación de tamaño frente a Base64.SVG a JSXConvierte código SVG en un componente React limpio: atributos camelCase, objetos de estilo, TypeScript.Chuleta de Tailwind CSSReferencia buscable de clases de Tailwind a CSS con vistas previas en vivo, decodificador de clases y paleta de colores.Generador de Web App ManifestCrea un manifest.json para PWA y todos los tamaños de icono de la app a partir de una imagen, descargados en un ZIP.Generador de patrones de fondo CSSCrea fondos de rayas, lunares, damero, zigzag y cuadrícula solo con CSS y copia el código.Generador de filtros de color CSSConvierte un color HEX en una cadena de filtros CSS que colorea iconos SVG negros, con puntuación de precisión.Generador de degradados animados CSSCrea fondos con degradado animado: elige colores, ángulo y velocidad, mira la vista previa en vivo y copia el CSS.Generador de efectos hover CSSElige efectos hover para botones, enlaces e imágenes, ajusta colores y tiempos, y copia el HTML y el CSS.Inliner de CSSConvierte el CSS de un email HTML en estilos en línea para que se vea bien en Gmail, Outlook y otros clientes de correo.Generador de divisores de forma CSSCrea divisores de sección con ondas, inclinaciones, curvas y triángulos y copia el SVG, el HTML y el CSS.Generador de CSS transformRota, escala, inclina y desplaza un elemento con controles deslizantes y copia el código CSS transform.Herramienta para combinar fuentesPrevisualiza combinaciones de fuentes de Google para títulos y cuerpo en diseños reales y copia el código embed y el CSS.Verificador de accesibilidad HTMLPega HTML para encontrar problemas de accesibilidad WCAG con nivel de impacto, el elemento que falla y la solución.Generador de mapas de imagen HTMLDibuja zonas clicables rectangulares, circulares y poligonales sobre una imagen y obtén el HTML del mapa de imagen.Visor de SVGAbre o pega código SVG para verlo en vivo con zoom, fondos, información de tamaño y exportación a PNG.Visualizador de búsqueda de caminosAnima BFS, DFS, Dijkstra, A* y búsqueda voraz en una cuadrícula con muros, pesos y laberintos.
Acerca de Herramientas web, HTML y CSS
Ayudas de front-end que generan CSS para sombras, degradados, bordes, botones y diseños flexbox, además de códigos de inserción y vistas previas de Open Graph. Ajusta visualmente y luego copia el código listo para usar.
Las más usadas: Vista previa de Open Graph, Generador de código para insertar videos de YouTube y Generador de box-shadow CSS.