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!

A Project with a default thumbnail (left) and a Project with a custom screenshot (right)

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.