Tool Workspace

Code Screenshot

Turn code into a polished visual share card with a live preview, filename label, language badge, and exportable HTML.

Return to Tools Home

Loading access...

File Name

Theme

Code Input

Copy

Live Preview

Generated HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Code Screenshot</title>
</head>
<body style="margin:0;padding:32px;background:#050816;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;">
    <div style="border:1px solid rgba(148,163,184,0.18);background:#0b1220;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.18);">
      <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#0f172a;border-bottom:1px solid rgba(148,163,184,0.18);">
        <div style="display:flex;align-items:center;gap:10px;">
          <div style="display:flex;gap:8px;">
            <span style="width:12px;height:12px;border-radius:999px;background:#ff5f57;display:inline-block;"></span>
            <span style="width:12px;height:12px;border-radius:999px;background:#febc2e;display:inline-block;"></span>
            <span style="width:12px;height:12px;border-radius:999px;background:#28c840;display:inline-block;"></span>
          </div>
          <span style="color:#e5edf8;font-size:14px;font-weight:600;letter-spacing:0.01em;">snippet.ts</span>
        </div>
        <span style="padding:6px 10px;border-radius:999px;background:rgba(226,178,79,0.14);color:#f3d38a;font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;">TypeScript</span>
      </div>

      <div style="display:grid;grid-template-columns:auto 1fr;background:#020617;">
        <div style="padding:22px 14px 22px 18px;color:#94a3b8;font-size:13px;line-height:1.8;text-align:right;user-select:none;border-right:1px solid rgba(148,163,184,0.18);white-space:nowrap;">1</div>
        <pre style="margin:0;padding:22px 24px;color:#e5edf8;font-size:13px;line-height:1.8;overflow:auto;white-space:pre-wrap;word-break:break-word;"><code>// Paste code here</code></pre>
      </div>
    </div>

    <div style="margin-top:12px;color:#94a3b8;font-size:12px;letter-spacing:0.02em;">
      Browser-rendered code card • safe escaped output
    </div>
  </div>
</body>
</html>

Loading access...