slideshot — HTML to High-Res Slides, PNG, WebP & PDF

SelectorWHScale

pngwebppdf

2160 × 27004x

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#1A1A1A;padding:12px;font-family:'Space Mono',monospace;display:flex;flex-direction:column;align-items:flex-start;gap:40px;}
.slide{position:relative;width:540px;height:675px;background:#F0EDE7;padding:32px 40px 52px;overflow:hidden;font-family:'Space Mono',monospace;flex-shrink:0;}
.slide::before{content:'';position:absolute;top:24px;right:24px;width:80px;height:80px;border-top:1px solid #B8B4AD;border-right:1px solid #B8B4AD;pointer-events:none;}
.slide::after{content:'';position:absolute;bottom:24px;left:24px;width:60px;height:60px;border-bottom:1px solid #B8B4AD;border-left:1px solid #B8B4AD;pointer-events:none;}
.h1{font-size:72px;font-weight:700;line-height:1.0;margin-bottom:18px;color:#1A1A1A;letter-spacing:-.02em;}
.h1 i{color:#00B894;font-style:italic;}
.h1 s{color:#C0BCB5;text-decoration:none;}
.lbl{font-size:10px;color:#888;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.ft{position:absolute;bottom:0;left:0;right:0;padding:0px 24px 8px;display:flex;justify-content:space-between;align-items:flex-end;}
.ft-h{font-size:8.5px;font-weight:700;color:#1A1A1A;}
.ft-sw{font-size:8.5px;color:#888;}
</style>
</head>
<body>
<div class="slide">
  <div class="lbl">Welcome</div>
  <div class="h1">Paste your<br><i>HTML</i><br><s>here.</s></div>
  <div style="margin-top:20px;font-size:11px;color:#888;line-height:1.6;">
    This is a sample slide. Replace this HTML with<br>
    your own AI-generated carousel content.<br><br>
    Each <code style="background:#E8E5DF;padding:2px 6px;border-radius:3px;font-size:10px;">.slide</code> element becomes one image.
  </div>
  <div class="ft">
    <span class="ft-h">slideshot</span>
    <span class="ft-sw">Export to PNG, WebP, PDF</span>
  </div>
</div>
</body>
</html>

PREVIEW

100%