PRO members can upload a custom screenshot for Pens.

Screenshots are shown:

• As the thumbnail view of a Pen for logged-out visitors and visitors on mobile browsers
• As the thumbnail view of a Pen for members who choose to browse CodePen with images instead of iframes on the desktop (an optional user setting).
• in metadata for social media, like Twitter cards and Facebook shares.

Adding a Custom Screenshot

To upload a screenshot for your Pen, open the Settings menu and select the “Screenshot” tab. Click the “Upload a Custom Screenshot” button to upload your screenshot image.

What can I do?

You can design your screenshots however you like! We recommend you create them at 1000×562 in size.

Keep in mind that, like everything on CodePen, custom screenshots have to comply with our Terms of Service and Code of Conduct.