screenshot-transparent-html-element

[timomeh]

cover_image: https://github.com/timomeh/timomeh.de/assets/4227520/d248fcac-7cf0-4320-8638-cf4e90e86873

Screenshot an HTML element with transparent background

Today I learned that you can capture a screenshot with transparent background using Safari's Web Inspector. That's nice because Chrome's Dev Tools can't do it. It will always capture it with the background. Sometimes I just want to quickly paste an HTML element into Figma without recreating it. Now I have at least one reason to open Safari from time to time!

A few interesting things to mention:

• If you zoom in, the screenshot is also more high res, which is nice.
• If you select text, the text is also selected in the screenshot. Before you ask: the mouse is not included.
• It only makes a screenshot of whatever is in the bounds of the selected element. If the element has a shadow, the shadow is not in the screenshot. You gotta add some spacing around it if you wanna include the shadow.
• It also includes any absolute positioned child elements, even if they're not in the bounds of the element. Which makes sense, you're capturing the node, which also includes its children.
• While the screenshot does not include the background, it does include elements that overlap the bounds of screenshot, even if they're from a totally different node.
• But it doesn't include all overlapping elements? It's a bit difficult to explain, let me demonstrate:

I played around with it, and when I remove the inline-block from my name, it is in the screenshot. Interesting, but not interesting enough to try to understand it because it's likely the most useless knowledge out there.