Turn code into a styled image card

Create a styled HTML code card with an escaped snippet, theme, and language label.

freeworks offlinenothing uploaded

ToolCode to Image

Input

Output

—

Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

AccentBackground

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

How it works

Source text is HTML-escaped and placed in a styled preformatted card with the selected theme, label, padding, and font size. The result is an HTML data URL, not a raster screenshot or syntax-aware image.

Dark theme and monospace text suit code cards.
Escaping prevents source characters becoming markup.

Worked example

Dark theme code card

Generate a styled code screenshot with dark theme

Input

											const greeting = 'Hello, World!';
console.log(greeting);

Output

												<div style="background:#21252b;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3);max-width:720px;font-family:monospace;">
  <div style="display:flex;align-items:center;padding:12px 16px;background:#21252b;">
    <div style="display:flex;gap:8px;">
      <div style="width:12px;height:12px;border-radius:50%;background:#ff5f56;"></div>
      <div style="width:12px;height:12px;border-radius:50%;background:#ffbd2e;"></div>
      <div style="width:12px;height:12px;border-radius:50%;background:#27c93f;"></div>
    </div>
    
  </div>
  <div style="display:flex;background:#282c34;padding:24px;">
    <pre style="margin:0;padding-right:16px;line-height:1.6;font-size:14px;"><spa…

When to use this

README cards, tutorials, and social previews render HTML snippets.

Edge cases

< and & in source must be escaped.
Very long code can exceed the card’s visual size.
A browser screenshot is still needed to upload a raster image.

References

WHATWG HTML