PRO members can upload a custom screenshot for Pens and Projects.
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 (a user setting).
- in metadata for social media, like Twitter cards and Facebook shares.
- in RSS feeds of your content
Adding a Custom Screenshot
To upload a screenshot for your Pen or Project, open the Settings menu and select the “Screenshot” tab.

Just like our Asset Hosting feature, you can drag & drop an image right onto that area. Or, click the button and use your computer’s native file picker.

On a Project, your screenshot replaces our default thumbnail image. Check out how cool Giana’s Project looks in the grid with her custom screenshot!

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.