Introduction

If you are like me, you like to create graphics using the tools you already know. If I need a banner or graphic for something, I don't want to spend 2 weeks learning Photoshop, Canva, or some other graphic design tool to create a single, simple image for a specific purpose.

Here is a simple way to create any image or graphic you need using the tools you already know, HTML and CSS. I made the banner for this blog post using this very method! And I will use it as an example in this article.

Create an Empty HTML Document

First create a HTML document, doesn't need anything other than enough to open it in chrome and see its content.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

You don't need the meta tags, they just get generated when using the VS Code doc snippet.

Next let's create a div with a class to set things up along with some CSS styles for what we need, a cover image for a hashnode blog post is 1600x840 so that's what we will specify for its width and height.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            .banner {
                /* Desired width */
                width: 1600px;

                /* Desired height */
                height: 840px;

                /* A nice looking gradient at a 45deg angle because i'm edgy */
                background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);

                /* White text seems appropriate */
                color: white;

                /* Some padding to help text wrap nicely */
                padding: 4rem;

                /* Chrome supports Segoe UI out of the box and it's usually good enough for banners */
                /* Easy to import a custom font though! */
                font-family: Segoe UI;

                /* And finally just use flex-box to center the text vertically */
                display: flex;
                align-items: center;
            }

            .text {
                /* Center the text horizonally too */
                text-align: center;

                /* Font size set to whatever looks best */
                font-size: 80px;
            }
        </style>
    </head>
    <body>
        <div  class="banner">
            <div class="text">Create Beautiful Banners and Other Graphics Easily Using HTML and CSS</div>
        </div>
    </body>
</html>

And here we have it!

You can do so much with so little, here it is with an image and text stroke:

.banner {
    background: url(./background.jpg);
    background-size: cover;
}

.text {
    font-weight: 500;
    -webkit-text-stroke: 1px black;
}

You get the point, you can get as fancy as you like, with minimal effort using HTML and CSS, and you aren't constrained by any tooling, pay walls, or forced sign ups.

Save it as an Image!

Chrome makes it SUPER easy to create an image from what you've made. Once you are happy with your design, you can right-click and inspect the div element to find it in the Chrome Dev Tools Inspector. Chrome gives you an option if you right click the div in the inspector to Capture node screenshot. This saves the div as it's rendered as a PNG image. Done!