Free tool · HTML and CSS to image
HTML to image
Paste HTML and CSS and get an image of it, rendered by a real browser: social cards, banners, certificates, email previews or code you want to show as a picture. No sign-up.
What people render as images
| Use | Typical size |
|---|---|
| Open Graph and X (Twitter) cards for blog posts | 1200 × 630 |
| Instagram and LinkedIn posts | 1080 × 1080 |
| Certificates, badges and tickets | the size of your design, often with Retina |
| Email and newsletter previews | 600-800 wide, full height |
| Code snippets, quotes and charts as pictures | any |
The size of the image
The size you choose is the browser window (the viewport) in CSS pixels. Retina doubles the pixels in both directions, so a 1200 × 630 card becomes a sharp 2400 × 1260 image. Full height of the document captures everything below the window too, for long emails or reports.
Design for the size you pick: 100vh is the height of the window, and fixed sizes in px stay as they are.
Tips for HTML that renders well
- Load fonts, images and stylesheets from absolute https:// URLs, or embed them as data: URLs.
- Set a background on
body: without one, PNG and WebP get a white page. - Scripts run, but the render ends after about 12 seconds; avoid animations that start late.
Render HTML to images from your code
The screenshotbase API takes the same HTML in a JSON body: POST /v1/take with html and a format, and the answer is the image. Generate a social card for every blog post or a certificate for every participant from your own templates. For HTML to PDF, see HTML to PDF; to capture a live website, use the website screenshot tool.
Frequently asked questions
How do I convert HTML to an image?
Which size should I use for social media images?
PNG, JPG or WebP?
Can I use my own fonts and images?
Is my HTML stored?
How many images can I create for free?
HTML to image API
Generate images from HTML in your code
POST /v1/take with html renders your HTML in Chromium and returns a PNG, JPG, WebP or GIF: any size, retina pixel ratios, the full height of the document, extra CSS. For Open Graph images, certificates and anything you design with HTML and CSS.
/v1/take documentation HTML rendering API All documentation
300 free requests every month, and each image from HTML counts as one. No credit card required.
POST https://api.screenshotbase.com/v1/take
# Response: the image (image/png)
curl -X POST "https://api.screenshotbase.com/v1/take" \
-H "apikey: YOUR-API-KEY" \
-H "Content-Type: application/json" \
-d '{"html": "<h1>Hello</h1>", "format": "png", "viewport_width": 1200, "viewport_height": 630}' \
-o card.png