HTML to Image Converter

Convert HTML content to SVG and PNG formats

HTML Input

Use Tailwind CSS

Quick Templates

HTML Content (use inline styles)

<div style="max-width: 400px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; padding: 24px; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
  
  <div style="display: flex; align-items: center; margin-bottom: 20px;">
    <div style="width: 48px; height: 48px; background: linear-gradient(45deg, #ff6b6b, #feca57); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; margin-right: 12px;">JD</div>
    <div style="flex: 1;">
      <h2 style="margin: 0; font-size: 18px; font-weight: 600;">John Doe</h2>
      <div style="display: flex; align-items: center; margin-top: 4px;">
        <div style="width: 8px; height: 8px; background: #10b981; border-radius: 50%; margin-right: 6px;"></div>
        <span style="font-size: 12px; opacity: 0.9;">Online now</span>
      </div>
    </div>
    <div style="background: rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">Pro</div>
  </div>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px;">
    <div style="background: rgba(255, 255, 255, 0.1); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);">
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 4px;">142</div>
      <div style="font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px;">Projects</div>
    </div>
    <div style="background: rgba(255, 255, 255, 0.1); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);">
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 4px;">98%</div>
      <div style="font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px;">Success</div>
    </div>
    <div style="background: rgba(255, 255, 255, 0.1); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);">
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 4px;">4.9</div>
      <div style="font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px;">Rating</div>
    </div>
  </div>

<div style="background: rgba(255, 255, 255, 0.1); padding: 16px; border-radius: 12px; margin-bottom: 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
      <span style="font-size: 14px; font-weight: 500;">Current Sprint</span>
      <span style="font-size: 12px; opacity: 0.8;">7 days left</span>
    </div>
    <div style="background: rgba(0, 0, 0, 0.2); height: 8px; border-radius: 4px; overflow: hidden;">
      <div style="background: linear-gradient(90deg, #10b981, #3b82f6); height: 100%; width: 68%; border-radius: 4px;"></div>
    </div>
    <div style="margin-top: 8px; font-size: 12px; opacity: 0.9;">68% complete • 12/18 tasks done</div>
  </div>

<div style="display: flex; gap: 8px;">
    <button style="flex: 1; background: rgba(255, 255, 255, 0.2); border: none; padding: 12px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; cursor: pointer; backdrop-filter: blur(10px);">Message</button>
    <button style="flex: 1; background: linear-gradient(45deg, #ff6b6b, #ee5a24); border: none; padding: 12px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);">Hire Now</button>
  </div>

<div style="margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px;">
    <span style="background: rgba(59, 130, 246, 0.3); color: #93c5fd; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500;">React</span>
    <span style="background: rgba(16, 185, 129, 0.3); color: #6ee7b7; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500;">Node.js</span>
    <span style="background: rgba(245, 158, 11, 0.3); color: #fcd34d; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500;">TypeScript</span>
    <span style="background: rgba(139, 92, 246, 0.3); color: #c4b5fd; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500;">Design</span>
  </div>
</div>

Preview & Export

John Doe

Instructions:

Choose a quick template or enter your own HTML content
Toggle Tailwind CSS if you want to use utility classes
Enter HTML content (inline styles or Tailwind classes)
Preview updates automatically
Download as SVG or high-quality PNG, or copy the SVG code

Export Quality:

SVG: Vector format, perfect quality at any size, smaller file size.

PNG: High-quality raster format (2x resolution), transparent background, larger file size.

Styling Options:

Inline Styles: Work in both SVG and PNG exports. Use for maximum compatibility.

Tailwind CSS: Works in both SVG and PNG exports! The full Tailwind CSS is embedded directly in the SVG. (can be tricky with TailwindCSS versions)