Generador de snippets HTML con vista previa
Elige un componente, ajusta el texto y los colores, y copia un fragmento autónomo con estilos en línea. La vista previa se actualiza al instante en un iframe aislado.
Espacio de trabajo · Generador de snippets HTML
El HTML usa estilos en línea para poder pegarlo en cualquier plantilla. El texto se escapa para evitar inyección.
<a href="https://bytooly.space/" style="display:inline-block;padding:13px 22px;border-radius:14px;background:#1a73e8;color:#fff;font-family:system-ui,sans-serif;font-size:15px;font-weight:600;text-decoration:none"> Descubre ByTooly </a>
Cómo se usa
Selecciona el componente: botón, tarjeta, aviso, formulario o tabla.
Cambia el título, el texto, el color principal y el radio de las esquinas.
Comprueba la vista previa, copia el HTML o descárgalo como archivo.
Ejemplos
Botón de llamada a la acción
Un enlace con fondo sólido, texto blanco y radio de 14 px listo para pegar en una landing.
Aviso informativo
Un bloque con borde y fondo suave que usa el color elegido, sin depender de ninguna hoja de estilos externa.
Lo que conviene saber
Los estilos se escriben en línea para que el fragmento funcione en cualquier plantilla, correo o CMS sin cargar CSS adicional. El texto introducido se escapa antes de insertarlo, de modo que no se interpreten etiquetas ni scripts no deseados.
La vista previa se ejecuta en un iframe con sandbox, separada del resto de la página. El código generado es un punto de partida: para un proyecto real conviene mover los estilos a una hoja de estilos y revisar el contraste, el foco visible y el tamaño táctil.
Preguntas frecuentes
Herramientas relacionadas
Otras herramientas que pueden servirte para tareas similares.
Formateador HTML
Indenta y ordena HTML para que sea fácil de leer.
Formateador CSS
Embellece CSS con reglas, propiedades y llaves bien indentadas.
Generador de border-radius
Ajusta las cuatro esquinas por separado y copia el CSS con vista previa.