I generate every blog cover with headless Chrome and a bit of CSS, no design tool
I have not opened a design tool to make a blog cover in months. Every post I publish gets a branded 1000x420 image, and each one is generated by a script that screenshots a styled HTML card with headless Chrome. The cover on this very post was made that way, in about a second, from a title and an accent color. If you publish anything on a schedule, hand-making cover or social images is exactly…
For months, the author has not opened a design tool to create blog covers. Instead, they generate a branded 1000x420 image for each post using a script that takes a screenshot of a styled HTML card with headless Chrome. The cover for this article was made in just a second from a title and an accent color. The technique is simple: use the Chrome binary to take a screenshot from the command line, sizing the page precisely to get an exact-dimension PNG without cropping.
The HTML card is created using CSS, which provides the design elements such as gradients, overlay, accent color, headline, and footer. The template includes placeholders for the title and accent color, with a small Python wrapper to fill in the content and generate the temporary HTML file. The script then takes a screenshot with the specified dimensions and window size, producing a 1000x420 image every time.
The author highlights a few gotchas, such as the need to HTML-escape text, ensuring system fonts are used, and maintaining exact dimensions to avoid cropping or scrollbar artifacts. While this method may not be suitable for one-off hero images, it offers significant advantages for creating images for every post, including version control, diffing, and repeatability.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
