CSS Browser Frame for Screenshots
I prepared this snippet on CodePen to help me frame screenshots for a conference talk slide deck. You can specify your screenshot width and height in the pen’s CSS, take a screenshot of the browser frame, and add it behind your screenshot in your presentation.

Screenshot of CSS Browser Frame for Screenshots pen
Pseudo content for buttons
To create the faux browser buttons, I used ::before
and ::after
pseudo content on the enclosing figure
element, as well as another ::before
element on the link element wrapping the image. Why on the link element? Well ::before
/::after
pseudo content are contained by the element’s formatting box
and therefore don’t apply to “replaced elements”, including <img>
(or <br>
). So I cannot attach the pseudo content to the <img>
. Alternatively, I might have placed the pseudo content on the caption
element, but I’m less sure I’ll always want a caption visible.
I made another pen for a CSS Browser Frame for Screenshots with Additional Elements, if you are able to add more markup.
Transparent GIF placeholder image
For the screenshot image itself, I used a transparent 1px GIF encoded as a base64 data URI:
<!-- Transparent 1px image encoded as base64 data URI -->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="">
This lets you use CSS to control the background color, but also illustrates where you might place an actual image. You might link the img src=""
directly to your desired screenshot if it’s hosted somewhere. Otherwise, you might also be interested in a placeholder kitten:
<img src="http://placekitten.com/272/340" alt="Adorable placeholder kittens">
LICEcap for sizing
If I already have a screenshot of an unknown size that I want to frame, I use LICEcap, which I usually use to capture animated GIFs of my desktop. You can easily resize LICEcap’s window to match the size of your screenshot and it will tell you the dimensions of the frame to use in the pen.
CSS Browser Frame for Screenshots with Semantic Markup CodePen
Here’s the pen:
See the Pen CSS Browser Frame for Screenshots with Semantic Markup by Di (@didoesdigital) on CodePen.
CSS Browser Frame for Screenshots CodePen
If this pen is interesting to you, be sure to follow DiDoesDigital on CodePen!